/* cache-bump v2 — route the app webview around a stale SW-cached stylesheet */ :root{ /* WHOOP-inspired dark: deep near-black ground, flat slate cards, electric blue + bright green */ --bg:#0a0e14; --card:#151b23; --border:#242c37; --text:#eef2f7; --dim:#8b98a8; --accent:#33c2ff; --ok:#37d97a; --warn:#f5a742; --pink:#ff6b6b; --glass:#141a22; --glass-bd:#232b36; } /* Light theme (applied when ) */ html.light{ --bg:#f6f2ea; --card:#fffdf9; --border:#e6e0d4; --text:#211f1a; --dim:#6d6860; --accent:#1f6f5c; --ok:#2d6a3e; --warn:#b45309; --pink:#c2185b; --glass:rgba(255,255,255,.82); --glass-bd:#e6e0d4; } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} :root{--serif:"Newsreader",Georgia,'Times New Roman',serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif} body{color:var(--text);font-family:var(--sans); font-size:15px;min-height:100vh;-webkit-font-smoothing:antialiased; background:linear-gradient(160deg,#0c1119 0%,#07090e 100%) fixed;transition:background .3s,color .3s} html.light body{background:linear-gradient(135deg,#f6f2ea 0%,#efe7d8 100%) fixed} html.light .recon{background:#e8f5ec;border-color:#a5d6b0} /* light-mode fixes: elements that used dark backgrounds */ html.light input,html.light select,html.light textarea{background:#fffdf9;color:#211f1a;border-color:#e6e0d4} html.light input::placeholder{color:#9a9184} html.light .btn{background:#f6f2ea;color:#57514a;border-color:#e6e0d4} html.light .btn.log,html.light .btn.primary{background:var(--accent);color:#fff} html.light .header-nav a{background:#f6f2ea;color:#57514a} html.light .header-nav a.on{background:var(--accent);color:#fff} html.light .metric,html.light .trend{background:#f8f4ec} /* theme toggle button */ .theme-toggle{padding:7px 12px;border-radius:10px;background:rgba(20,24,32,.5);border:1px solid var(--glass-bd); color:var(--dim);font-weight:600;font-size:13px;cursor:pointer} html.light .theme-toggle{background:#f6f2ea} a{color:var(--accent);text-decoration:none} /* wider canvas, matching the old monitor dashboard; safe-area aware on iPhone */ .wrap{max-width:1400px;margin:0 auto;padding:16px} @supports (padding: max(0px)){ .wrap{padding-top:max(16px,env(safe-area-inset-top)); padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); padding-bottom:max(16px,env(safe-area-inset-bottom))} } @media(max-width:520px){.wrap{padding-left:12px;padding-right:12px}} /* two-column top row (Protocol Summary | Apple Health), like the monitor dashboard */ /* equal-width AND equal-height: both cards stretch to the taller one */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:stretch} .two-col > .card{height:100%} @media(max-width:760px){.two-col{grid-template-columns:1fr}} .sum-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--glass-bd);font-size:14px} .sum-row:last-child{border-bottom:none} .sum-row .k{color:var(--dim)}.sum-row .v{font-weight:700;color:var(--accent)} .sum-row .v.active{color:var(--ok)} .mini-dose{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;border-bottom:1px solid var(--glass-bd)} .mini-dose:last-child{border-bottom:none} .mini-dose .mt{color:var(--dim);min-width:64px;font-size:12px} .mini-dose .mn{font-weight:600}.mini-dose.done .mn{color:var(--ok)}.mini-dose.skip .mn{color:var(--pink);text-decoration:line-through} .health-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--glass-bd);font-size:14px} .health-row:last-child{border-bottom:none} .health-row .k{color:var(--dim)}.health-row .v{font-weight:700;color:var(--accent)} .live{display:inline-block;background:rgba(102,187,106,.2);color:var(--ok);font-size:10px;font-weight:700; padding:2px 8px;border-radius:8px;margin-left:8px;vertical-align:middle} /* dashboard-style header */ .app-header{margin-bottom:18px;padding:16px;border-radius:16px; background:var(--glass);border:1px solid var(--glass-bd); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .header-title{font-family:var(--serif);font-style:italic;font-size:25px;font-weight:500;color:var(--accent);letter-spacing:-.02em;display:flex;align-items:center;gap:9px} .header-logo{flex:none;display:block;border-radius:7px} .header-subtitle{font-size:12px;color:var(--dim);margin-top:4px} /* header sync chips: last Health Auto Export post + page render time */ .header-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--dim); background:var(--glass-bd);border-radius:8px;padding:3px 9px;white-space:nowrap;cursor:default} .chip b{color:var(--text);font-weight:700} .chip-warn{color:var(--warn)} .chip-warn b{color:var(--warn)} /* single-line nav: equal-width tabs that fit one row on a phone */ .header-nav{display:flex;gap:5px;flex-wrap:nowrap;margin-top:14px;max-width:640px} .header-nav a{flex:1 1 0;min-width:0;text-align:center;padding:9px 4px;border-radius:10px; background:rgba(20,24,32,.5);border:1px solid var(--glass-bd);color:var(--dim); font-weight:600;font-size:12px;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:520px){.app-header{padding:12px}.header-nav a{font-size:11.5px;padding:9px 3px} .header-nav.nav-tight a{font-size:10px;letter-spacing:-.3px;padding:9px 2px}} .header-nav a.on{background:var(--accent);color:var(--bg);border-color:var(--accent)} /* Settings list */ .set-list{padding:0;overflow:hidden} .set-row{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px 16px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none} .set-row:last-child{border-bottom:0} .set-t{font-size:15px;font-weight:600} .set-d{font-size:12px;color:var(--dim);margin-top:2px} .set-r{color:var(--dim);font-size:18px;flex:none} /* today head */ .head-row{display:flex;justify-content:space-between;align-items:flex-end;margin:2px 2px 14px} .date{font-size:20px;font-weight:700}.dim{color:var(--dim)}.tiny{font-size:12px} .adher{font-size:15px;font-weight:800}.adher.ok{color:var(--ok)}.adher.warn{color:var(--warn)} .section-label,.section-title{font-size:13px;letter-spacing:.06em;text-transform:uppercase; color:var(--dim);font-weight:700;margin:18px 2px 12px} .section-title{font-family:var(--serif);font-size:19px;font-weight:600;text-transform:none;letter-spacing:-.01em;color:var(--text)} /* cards — glassmorphism to match the dashboard */ .card{background:var(--glass);border:1px solid var(--glass-bd);border-radius:16px;padding:16px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .card-title{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px} .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px} .metric{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center} .metric-val{font-size:18px;font-weight:700;color:var(--accent)} .metric-name{font-size:11px;color:var(--dim);margin-top:2px} /* dose rows */ .dose{display:flex;align-items:center;gap:12px;background:var(--glass);border:1px solid var(--glass-bd); border-radius:14px;padding:12px 14px;margin-bottom:10px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .dose.done{border-color:var(--ok)}.dose.due{border-color:var(--warn)}.dose.skipped{opacity:.55} .dose .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--dim);flex:0 0 auto; display:grid;place-items:center;font-size:12px;color:var(--bg)} .dose.done .tick{background:var(--ok);border-color:var(--ok)} .dose .info{flex:1;min-width:0}.dose .nm{font-weight:700} .dose .meta{font-size:12px;color:var(--dim);margin-top:2px} .dose .act{display:flex;gap:6px} .btn{display:inline-block;padding:7px 12px;border-radius:9px;border:1px solid var(--border); background:rgba(20,24,32,.5);color:var(--dim);font-size:13px;font-weight:700;cursor:pointer} .btn.log,.btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)} .btn.del{color:var(--warn);border-color:transparent;background:transparent} .btn.primary{padding:10px 16px;font-size:14px} .empty{color:var(--dim);text-align:center;padding:26px;border:1px dashed var(--border);border-radius:12px} .err{background:#3a1c1c;border:1px solid #ff6b6b;color:#ffd7d7;padding:10px 12px;border-radius:10px;margin-bottom:12px} .ok-msg{background:#14251c;border:1px solid var(--ok);color:#bff0cf;padding:10px 12px;border-radius:10px;margin-bottom:12px} .tag{background:var(--border);color:var(--dim);font-size:10px;padding:1px 6px;border-radius:8px} .pill.bw-ok{background:rgba(102,187,106,.18);color:var(--ok)} .pill.bw-warn{background:rgba(255,167,38,.18);color:var(--warn)} .pill.bw-bad{background:rgba(240,98,146,.2);color:var(--pink)} .pill.bw-dim{background:var(--border);color:var(--dim)} /* weekly schedule grid — laid out like the old monitor dashboard */ .week-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch; background:var(--glass);border:1px solid var(--glass-bd);border-radius:14px;padding:8px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .week{border-collapse:collapse;width:100%;font-size:12px;min-width:900px} .week th,.week td{border-bottom:1px solid var(--border);padding:10px 10px;vertical-align:middle; text-align:left;min-width:118px} .week td{border-right:1px solid var(--glass-bd)} .week td:last-child,.week th:last-child{border-right:none} /* header: grey band, today as a filled box */ .week .wk-head th{background:var(--glass-bd);text-align:center;padding:8px 6px;border-bottom:none} .week .wk-head th:first-child{background:transparent} .week .wk-head th:nth-child(2){border-top-left-radius:8px;border-bottom-left-radius:8px} .week .wk-head th:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px} .wk-daycell,.wk-daybox{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.25} .wk-daybox{background:#1b6b3a;color:#fff;border-radius:9px;padding:8px 6px} html.light .wk-daybox{background:#1b6b3a} .wk-dow{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--dim)} .week .wk-dd{font-size:10px;color:var(--dim);letter-spacing:.04em} .wk-daybox .wk-dow,.wk-daybox .wk-dd{color:#fff} .wk-todaylbl{font-size:9px;font-weight:800;letter-spacing:.08em;color:#bff0cf} .week .wk-time{position:sticky;left:0;background:var(--card);color:var(--text);font-weight:700; white-space:nowrap;text-align:left;min-width:88px;z-index:1;font-size:12px} .week td.wk-today{background:rgba(77,208,225,.08); border-left:2px solid var(--accent);border-right:2px solid var(--accent)} .week .wk-past{opacity:.55} /* one dose = tick + coloured name pill + dose/route text (old layout) */ .wk-dose{display:flex;align-items:center;gap:6px;margin:3px 0;text-decoration:none;cursor:pointer; transition:transform .06s} .wk-dose:hover{transform:translateY(-1px)} .wk-dose:active{transform:translateY(0)} .wk-tick{font-size:11px;line-height:1;flex:0 0 auto} .wk-meta{font-size:10px;color:var(--dim);white-space:nowrap} .wk-dose.wk-marked .wk-meta{opacity:.7} .wk-pill{display:inline-block;background:rgba(77,208,225,.14);color:var(--accent); border:1px solid var(--glass-bd);border-radius:7px;padding:4px 8px;font-size:11px;font-weight:700; white-space:nowrap;transition:background .12s} .wk-pill.wk-done{background:rgba(102,187,106,.22);color:var(--ok);border-color:rgba(102,187,106,.5); text-decoration:line-through} .wk-pill.wk-skip{background:rgba(240,98,146,.18);color:var(--pink);border-color:rgba(240,98,146,.45); text-decoration:line-through} html.light .wk-pill{background:#e7f0ec;color:#1f6f5c;border-color:#cfe0d6} html.light .wk-pill.wk-done{background:#e2f4e6;color:#2d6a3e;border-color:#a8d8b4} html.light .wk-pill.wk-skip{background:#fbe4ec;color:#c2185b;border-color:#f0bfd2} /* phones: stack dose meta under the pill so columns stay narrow, grid scrolls */ @media(max-width:560px){ .week{min-width:0} .week th,.week td{padding:8px 6px;min-width:92px} .week .wk-time{min-width:72px;font-size:11px} .wk-dose{flex-wrap:wrap;gap:4px} .wk-meta{white-space:normal;flex-basis:100%;margin-left:2px} .wk-pill{font-size:10px;padding:3px 6px} } /* category colour-coding (schedule pills + legend) */ .wk-cat-pep{--cat:#4dd0e1}.wk-cat-med{--cat:#ff8a65}.wk-cat-supp{--cat:#66bb6a} .wk-cat-noot{--cat:#ba68c8}.wk-cat-nad{--cat:#26c6da}.wk-cat-klow{--cat:#f06292}.wk-cat-trt{--cat:#ffca28} .week .wk-pill{border-left:3px solid var(--cat,var(--accent))} html.light .week .wk-pill{border-left-color:var(--cat,var(--accent))} .legend{display:flex;flex-wrap:wrap;gap:6px;margin:0 2px 10px} .legend-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;border-radius:8px; color:var(--cat,var(--accent));border:1px solid var(--cat,var(--glass-bd));background:transparent;white-space:nowrap} /* trends 7/30/90 toggle */ .trends-head{display:flex;justify-content:space-between;align-items:center} .seg{display:inline-flex;gap:2px;background:var(--glass-bd);border-radius:9px;padding:2px} .seg button{border:none;background:transparent;color:var(--dim);font-size:11px;font-weight:700; padding:4px 10px;border-radius:7px;cursor:pointer} .seg button.on{background:var(--accent);color:var(--bg)} html.light .seg button.on{color:#fff} .trend .tu{font-size:10px;color:var(--dim);font-weight:600} .trend .td{font-size:10px;color:var(--dim);margin-top:3px} /* as-needed peptides */ .prn-row{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 2px;border-bottom:1px solid var(--glass-bd)} .prn-row:last-child{border-bottom:none} .prn-info{min-width:0} /* backup status bar (admin only, bottom of dashboard) */ .backup-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:26px 2px 4px; padding:9px 12px;border-radius:10px;background:var(--glass);border:1px solid var(--glass-bd); font-size:12px;color:var(--text)} .backup-bar code{font-size:11px;background:var(--glass-bd);padding:1px 5px;border-radius:5px} .backup-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto} .backup-dot.fresh{background:var(--ok)} .backup-dot.stale{background:var(--warn)} .backup-warn{color:var(--warn);font-weight:600} /* protocol gates */ .gate-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--glass-bd);font-size:14px} .gate-row:last-child{border-bottom:none} .gate-date{color:var(--accent);font-weight:700;font-size:12px;min-width:78px} .gate-text{flex:1}.gate-done{opacity:.65} /* daily vitamins & medicine table (name pills, like the monitor dashboard) */ .vit-name{display:inline-block;background:rgba(77,208,225,.14);color:var(--accent); border:1px solid var(--glass-bd);border-radius:8px;padding:4px 10px;font-weight:700;font-size:13px} html.light .vit-name{background:#e7f0ec;color:#1f6f5c;border-color:#cfe0d6} .tbl td.when{white-space:nowrap;color:var(--text)} /* trends sparklines */ .trends{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px} .trend{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px; overflow:hidden;min-width:0} .trend svg{display:block;width:100%;max-width:100%} .trend .tn{font-size:11px;color:var(--dim);font-weight:600} .trend .tv{font-size:16px;font-weight:700;color:var(--accent)} /* auth pages */ .auth{max-width:360px;margin:10vh auto 0} .auth h1{font-size:24px;margin-bottom:4px;color:var(--accent)}.accent{color:var(--accent)} .auth p{margin-bottom:14px} form label{display:block;font-size:12px;color:var(--dim);font-weight:600;margin:10px 0 0} input,select{width:100%;background:rgba(15,20,25,.6);border:1px solid var(--border);color:var(--text); border-radius:9px;padding:10px;margin-top:4px;font-size:16px} .auth button{margin-top:16px;width:100%} /* tables + forms */ .tbl{width:100%;border-collapse:collapse;font-size:14px} .tbl th{text-align:left;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid var(--border)} .tbl td{padding:8px;border-bottom:1px solid var(--border);vertical-align:middle}.tbl td.nm{font-weight:700} .bw-tbl{min-width:720px} .bw-trend{min-width:112px} .bw-trend .spark{width:96px;height:26px;display:block} .inline{display:flex;gap:6px}.inline input{width:auto;flex:1;margin:0} .grid-form{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid-form label{margin:0}.grid-form button{grid-column:1/-1} @media(max-width:520px){.grid-form{grid-template-columns:1fr}} .calc .calc-inputs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} @media(max-width:520px){.calc .calc-inputs{grid-template-columns:1fr}} .recon{background:#12251f;border:1px solid var(--ok);border-radius:12px;padding:14px;margin-top:12px} .recon .lbl{font-size:10px;letter-spacing:.08em;color:var(--ok);font-weight:700;text-transform:uppercase} .recon .big{font-size:26px;font-weight:800;color:var(--accent);margin:4px 0} .recon .row{font-size:12px;color:var(--text)} /* Admin "viewing as" banner */ .actas-bar{background:#7c3aed;color:#fff;border-radius:10px;padding:9px 14px;margin:0 0 14px; font-size:13px;line-height:1.4;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .actas-bar a{color:#fff;text-decoration:underline;font-weight:600;margin-left:auto;white-space:nowrap} .actas-bar b{font-weight:700} /* Dose-reminder bar */ .remind-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px; padding:10px 14px;border:1px solid var(--line,#2a3441);border-radius:12px;background:var(--card,#161b22)} .remind-bar #pushBtn{white-space:nowrap} /* ── Landing page ─────────────────────────────────────────────── */ .lp{max-width:1000px;margin:0 auto} .lp-hero{padding:48px 8px 30px;text-align:center} .lp-logo{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:18px} .lp-logo .accent{color:var(--accent)} .lp-hero h1{font-size:clamp(28px,5vw,46px);line-height:1.1;margin:0 0 14px;letter-spacing:-1px} .lp-sub{font-size:clamp(15px,2.2vw,18px);color:var(--dim);max-width:640px;margin:0 auto 22px;line-height:1.5} .lp-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .btn.lg{padding:12px 22px;font-size:15px;border-radius:12px} .lp-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:16px 8px 8px} .lp-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px} .lp-card .lp-ic{font-size:26px;margin-bottom:8px} .lp-card h3{margin:0 0 6px;font-size:16px} .lp-card p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.5} .lp-login{display:flex;justify-content:center;padding:34px 8px 10px} .lp-login .auth{max-width:380px;width:100%} .lp-foot{text-align:center;padding:30px 0 40px} /* Demo + read-only banners */ .demo-bar{background:var(--accent);color:#04252b;border-radius:10px;padding:9px 14px;margin:0 0 12px; font-size:13px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .demo-bar a{color:#04252b;font-weight:700;text-decoration:underline;margin-left:auto;white-space:nowrap} .ro-flash{background:var(--warn);color:#3a2600;border-radius:9px;padding:8px 13px;margin:0 0 12px;font-size:13px;font-weight:600} /* Beta + coming-soon on landing */ .beta-badge{display:inline-block;vertical-align:middle;font-size:11px;font-weight:800;letter-spacing:.5px; padding:3px 8px;border-radius:999px;background:var(--accent);color:#04252b;margin-left:6px} .lp-beta{margin:16px auto 0;max-width:560px;font-size:13px;color:var(--dim); background:var(--card);border:1px dashed var(--border);border-radius:10px;padding:9px 14px} .lp-soon{display:flex;justify-content:center;padding:26px 8px 6px} .lp-soon-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center; max-width:760px;text-align:center;color:var(--dim);font-size:13.5px} .lp-soon-tag{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase; padding:4px 10px;border-radius:999px;border:1px solid var(--accent);color:var(--accent)} /* Landing top bar (logo left, Log in right) */ .lp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 4px 4px} .lp-topbar .lp-logo{margin-bottom:0} .lp-topbar .btn{padding:9px 20px} .lp .lp-hero{padding-top:28px} /* Larger wordmark in the landing top bar */ .lp-topbar .lp-logo{font-size:27px;font-weight:800;letter-spacing:-.5px;margin-bottom:0} /* POST-form action buttons (keep original inline/flex layout) */ .act-form{display:contents} .wk-dose-form{display:contents} button.wk-dose{background:none;border:0;color:inherit;font:inherit;text-align:left;padding:0;width:100%;cursor:pointer} /* Password-policy checklist on the change-password page */ .pw-rules{list-style:none;padding:0;margin:10px 0 14px;font-size:13px} .pw-rules li{color:var(--dim);padding:2px 0 2px 22px;position:relative} .pw-rules li::before{content:"○";position:absolute;left:2px;color:var(--dim)} .pw-rules li.ok{color:var(--ok)} .pw-rules li.ok::before{content:"✓";color:var(--ok)} /* Stack-check interaction rows */ .ix-row{padding:9px 0;border-bottom:1px solid var(--border)} .ix-row:last-child{border-bottom:0} .ix-row .pill{margin-right:8px} label.chk{display:inline-flex;align-items:center;gap:6px;margin:3px 14px 3px 0;font-weight:500;cursor:pointer} label.chk input{width:auto;margin:0} /* ══════════════════════════════════════════════════════════════════ Today-screen redesign (v2) — hero adherence ring, colour-coded vitals with sparklines, line-icon set, native bottom tab bar. Built on the existing token system; adds semantic range colours. ══════════════════════════════════════════════════════════════════ */ :root{--good:#37d97a;--watch:#f5b04a;--crit:#ff6b6b} html.light{--good:#1f9d6b;--watch:#c77d18;--crit:#d9534f} /* keep content clear of the fixed bottom bar */ body{padding-bottom:calc(74px + env(safe-area-inset-bottom))} /* inline line-icons */ .sic{width:1.05em;height:1.05em;vertical-align:-2px;flex:none} /* ---- Hero card ---- */ .hero{margin-bottom:16px;padding:0;overflow:hidden} .hero-top{display:flex;align-items:center;gap:18px;padding:18px} .hero-ring{position:relative;width:118px;height:118px;flex:none} .hero-ring svg{transform:rotate(-90deg);display:block;position:relative;z-index:1} /* WHOOP-style glow halo behind the ring (dark only) */ .hero-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;z-index:0;pointer-events:none; box-shadow:0 0 24px 1px color-mix(in srgb,var(--accent) 32%,transparent)} html.light .hero-ring::before{display:none} html.light .ring-prog{filter:none} .hero-ring .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .hero-ring .rc .b{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .hero-ring .rc .b small{font-size:15px;color:var(--dim);font-weight:700} .hero-ring .rc .l{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-top:5px} .hero-hi{flex:1;min-width:0} .hero-hi .g{font-family:var(--serif);font-size:23px;font-weight:500;letter-spacing:-.01em} .hero-hi .g-name{font-style:italic;font-weight:500} .hero-hi .s{font-size:13px;color:var(--dim);margin-top:3px} .hero-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .hero-stats .st{font-size:12px;color:var(--dim);background:var(--glass-bd);border-radius:999px;padding:4px 11px;white-space:nowrap} .hero-stats .st b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums} .hero-stats .st-streak{background:color-mix(in srgb,var(--watch) 16%,transparent);color:var(--text)} .hero-stats .st-streak .sic{color:var(--watch);vertical-align:-2px} .hero-next{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--glass-bd)} .hero-next .nb{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--accent);flex:none; background:color-mix(in srgb,var(--accent) 14%,transparent)} .hero-next .nb svg{width:20px;height:20px} .hero-next .nx{flex:1;min-width:0} .hero-next .nx .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700} .hero-next .nx .v{font-weight:800;font-size:15px;margin-top:1px} .hero-next .nx .m{font-size:12.5px;color:var(--dim)} .hero-next .np{font-size:12px;font-weight:800;color:var(--accent);white-space:nowrap; background:color-mix(in srgb,var(--accent) 14%,transparent);padding:6px 12px;border-radius:999px} .hero-next .np.ok{color:var(--good);background:color-mix(in srgb,var(--good) 16%,transparent)} @media(max-width:420px){.hero-top{gap:14px;padding:16px}.hero-ring{width:104px;height:104px}} .hero-quote{display:flex;gap:9px;align-items:flex-start;padding:11px 18px;border-top:1px solid var(--glass-bd); font-family:var(--serif);font-size:15px;font-style:italic;color:var(--dim);line-height:1.4} .hero-quote::before{content:"\201C";font-style:normal;font-weight:800;font-size:22px;line-height:.8; color:var(--accent);opacity:.75;flex:none} /* ---- Vitals tiles (colour-coded + sparkline) ---- */ .vitals{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .vtile{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:12px 13px} html.light .vtile{background:#f8f4ec} .vtile .vdot{position:absolute;top:13px;right:13px;width:8px;height:8px;border-radius:50%;background:var(--dim)} .vtile .vdot.good{background:var(--good)}.vtile .vdot.watch{background:var(--watch)}.vtile .vdot.crit{background:var(--crit)} .vtile .vtop{display:flex;align-items:center;gap:6px;color:var(--dim)} .vtile .vtop svg{width:15px;height:15px} .vtile .vlb{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase} .vtile .vval{margin-top:8px;font-size:21px;font-weight:800;letter-spacing:-.02em; font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px} .vtile .vval .vu{font-size:11px;font-weight:600;color:var(--dim);letter-spacing:0} .vtile svg.spark{margin-top:7px;width:100%;height:26px;display:block} /* ---- native bottom tab bar (replaces top pills) ---- */ .bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:900; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-top:1px solid var(--glass-bd)} .bottomnav .bn-inner{display:flex;justify-content:space-around;width:100%;max-width:520px;margin:0 auto} .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0; color:var(--dim);font-size:10px;font-weight:700;letter-spacing:-.1px;padding:4px 2px;border-radius:12px} .bottomnav a svg{width:22px;height:22px} .bottomnav a.on{color:var(--accent)} .bottomnav a.on svg{stroke-width:2} /* pull-to-refresh indicator */ #mp-ptr .mp-ptr-c{margin-top:10px;width:34px;height:34px;border-radius:50%;background:var(--card); box-shadow:0 6px 18px -6px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center; color:var(--accent);opacity:0;transform:scale(.65)} #mp-ptr .mp-ptr-c svg{width:18px;height:18px} #mp-ptr .mp-ptr-c.spin svg{animation:mp-spin .7s linear infinite} @keyframes mp-spin{to{transform:rotate(360deg)}} /* Health Score card */ .healthscore{margin-bottom:16px} .hs-top{display:flex;align-items:center;gap:16px;margin-bottom:14px;cursor:pointer} .hs-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px} .hs-chev{width:18px;height:18px;margin-left:8px;color:var(--dim);flex:none;transition:transform .2s} .hs-delta{margin-left:auto;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums} .hs-delta.up{color:var(--good);background:color-mix(in srgb,var(--good) 15%,transparent)} .hs-delta.down{color:var(--crit);background:color-mix(in srgb,var(--crit) 15%,transparent)} .hs-trendrow{margin-bottom:14px} .hs-trendrow .spark{width:100%;height:36px;display:block} .healthscore.collapsed .hs-top{margin-bottom:0} .healthscore.collapsed .hs-domains,.healthscore.collapsed .hs-trendrow{display:none} .healthscore.collapsed .hs-chev{transform:rotate(-90deg)} .hs-num{font-family:var(--serif);font-size:50px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .hs-num small{font-size:16px;color:var(--dim);font-weight:600;font-family:var(--sans)} .hs-lbl{font-size:16px;font-weight:800} .hs-domains{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px} @media(max-width:520px){.hs-domains{grid-template-columns:1fr}} .hs-dh{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:4px} .hs-dh b{font-variant-numeric:tabular-nums;font-weight:800} .hs-bar{height:6px;border-radius:999px;background:var(--glass-bd);overflow:hidden} .hs-fill{height:100%;border-radius:999px;transition:width .5s ease} .hs-fill.good{background:var(--good)}.hs-fill.watch{background:var(--watch)}.hs-fill.crit{background:var(--crit)}