/* App shell around the report: the app bar, four tabs (Today, Report, Files, Doctor), sheets and the viewer.
   Uses the report's tokens (report.css). Light only. Text 16px or larger; tap targets 48px or larger. */
:root{
  /* Safe areas: Capacitor 8 supplies --safe-area-inset-* on Android (older WebViews report env() wrongly). */
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --tabbar-h: 70px;
}
html, body{ margin:0; }
body{ min-height:100vh; min-height:100dvh; padding-bottom:calc(var(--tabbar-h) + var(--sab)); }
/* Keep content from showing through the status bar when the page scrolls. */
body::before{ content:""; position:fixed; left:0; right:0; top:0; height:var(--sat); background:var(--paper); z-index:45; pointer-events:none; }
[hidden]{ display:none !important; }
img{ max-width:100%; }
button{ font:inherit; }
.screen{ min-height:60vh; }
.wrap{ padding-block:8px 40px; }

/* ---------- App bar ---------- */
.appbar-wrap{ max-width:780px; margin-inline:auto; padding:calc(var(--sat) + 8px) var(--gutter) 0; }
.appbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; }
.brand{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:1.0625rem; color:var(--ink-2); }
.brand svg{ width:24px; height:24px; color:var(--lav); }
.who{ display:inline-flex; align-items:center; gap:8px; }
.who select{ font:inherit; font-size:1rem; font-weight:700; color:var(--ink); background:var(--sheet); border:1.5px solid var(--edge); border-radius:999px; min-height:48px; padding:0 14px; max-width:46vw; }
.iconbtn{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--edge); background:var(--sheet); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; touch-action:manipulation; font-size:1.4rem; font-weight:700; line-height:1; }
.iconbtn svg{ width:24px; height:24px; }
.iconbtn:disabled{ opacity:.45; }

/* ---------- Tab bar ---------- */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); background:var(--sheet); border-top:1px solid var(--edge); padding-bottom:var(--sab); }
.tab{ min-height:var(--tabbar-h); display:grid; justify-items:center; align-content:center; gap:4px; border:0; background:none; color:var(--ink-2); cursor:pointer; touch-action:manipulation; padding:6px 2px; }
.tab-pill{ width:60px; height:32px; border-radius:16px; display:grid; place-items:center; transition:background .2s; }
.tab-pill .ico{ width:24px; height:24px; }
.tab-label{ font-size:1rem; font-weight:600; line-height:1.1; }
.tab[aria-current="page"]{ color:var(--ink); }
.tab[aria-current="page"] .tab-pill{ background:var(--lav-wash); color:var(--lav-deep); }
.tab[aria-current="page"] .tab-label{ font-weight:800; }
.tab:focus-visible{ outline:2px solid var(--lav); outline-offset:-4px; border-radius:12px; }

/* While Claude works: a bar above the tabs on the other screens. */
.runbar{ position:fixed; left:12px; right:12px; bottom:calc(var(--tabbar-h) + var(--sab) + 10px); z-index:39; min-height:56px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; padding:8px 16px; border:0; border-radius:16px; background:var(--lav-deep); color:#fff; font-size:1rem; font-weight:700; text-align:left; box-shadow:0 10px 24px rgba(28,24,64,.25); cursor:pointer; }
.runbar .spin{ border-color:rgba(255,255,255,.35); border-top-color:#fff; }

/* ---------- Today, Files and Doctor ---------- */
.today, .files, .doctor{ display:grid; gap:26px; align-content:start; }
.t-head{ display:grid; gap:10px; padding-top:6px; }
.hello{ font-size:1.0625rem; font-weight:700; color:var(--lav-deep); }
.headline{ font-family:var(--display); font-weight:500; font-size:clamp(1.85rem, 7.6vw, 2.5rem); line-height:1.16; letter-spacing:-.01em; color:var(--ink); text-wrap:pretty; max-width:30ch; }
.headline.small{ font-size:clamp(2rem, 8vw, 2.6rem); font-weight:600; }
.headline b{ font-weight:700; }
.t-meta{ font-size:1rem; line-height:1.5; color:var(--ink-2); max-width:44ch; }
.t-note{ font-size:1rem; line-height:1.5; color:var(--ink-2); }

.flag-banner{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:16px; border-radius:18px; background:var(--serious-wash); border:2px solid var(--serious-ink); }
.flag-banner.gp{ background:var(--warn-wash); border-color:var(--warn-ink); }
.flag-banner > svg{ width:26px; height:26px; margin-top:2px; }
.flag-banner div{ display:grid; gap:6px; }
.flag-banner h2{ font-family:var(--body); font-size:1.25rem; font-weight:800; }
.flag-banner p{ font-size:1.0625rem; line-height:1.5; color:var(--ink); }

/* Add a letter or result */
.addcard{ display:grid; gap:10px; }
.add-main{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; min-height:76px; padding:12px 18px; border:0; border-radius:20px; background:var(--lav); color:var(--on-lav); text-align:left; cursor:pointer; touch-action:manipulation; box-shadow:0 10px 22px rgba(90,70,200,.22); }
.add-main svg{ width:32px; height:32px; }
.add-main b{ display:block; font-size:1.2rem; line-height:1.25; }
.add-main small{ display:block; font-size:1rem; opacity:.92; line-height:1.35; }
.add-cam{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 18px; border-radius:16px; border:1.5px solid var(--edge); background:var(--sheet); color:var(--ink); font-weight:700; font-size:1.0625rem; cursor:pointer; touch-action:manipulation; }
.add-cam svg{ width:26px; height:26px; color:var(--lav-deep); }
.add-main:active, .add-cam:active, .doc:active, .row-btn:active, .dchip:active{ transform:scale(.985); }
.add-main:disabled, .add-cam:disabled{ opacity:.5; cursor:default; }
.add-hint{ font-size:1rem; line-height:1.45; color:var(--ink-2); }
.addcard.compact .add-main{ min-height:64px; }

/* What matters now */
.t-sec{ display:grid; gap:12px; }
.t-sec > h2, .f-year{ font-size:clamp(1.55rem, 6.2vw, 1.9rem); }
.prio{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.prio-card{ background:var(--sheet); border:1px solid var(--edge); border-left:7px solid var(--c-ink, var(--lav)); border-radius:18px; padding:14px 16px 16px; display:grid; gap:9px; min-width:0; }
.prio-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.prio-n{ width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--display); font-size:1.25rem; font-weight:600; flex:none; }
.prio-card h3{ font-size:1.2rem; line-height:1.3; }
.prio-why{ font-size:1.0625rem; line-height:1.5; color:var(--ink-2); }
.prio-do{ font-size:1.0625rem; line-height:1.5; color:var(--ink); background:var(--paper); border-radius:12px; padding:10px 12px; }
.prio-meta{ display:flex; flex-wrap:wrap; gap:4px 18px; font-size:1rem; color:var(--ink-2); }
.prio-meta b{ color:var(--ink); }
.prio-card .btn{ justify-self:start; }

/* Lists of rows (what's changed, going well) */
.rows{ list-style:none; margin:0; padding:0; background:var(--sheet); border:1px solid var(--edge); border-radius:18px; overflow:hidden; }
.rows li + li{ border-top:1px solid var(--hair); }
.row-btn{ width:100%; min-height:58px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; touch-action:manipulation; font-size:1.0625rem; line-height:1.45; }
.row-btn.static{ cursor:default; grid-template-columns:auto minmax(0,1fr); }
.row-ic{ width:24px; height:24px; }
.row-tx b{ font-weight:700; }
.chev{ width:10px; height:10px; border-right:2.5px solid var(--ink-2); border-bottom:2.5px solid var(--ink-2); transform:rotate(-45deg); margin-right:4px; flex:none; }
.rows.tight .row-btn{ min-height:50px; }

.dues{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.dues li{ background:var(--sheet); border:1px solid var(--hair); border-radius:16px; padding:12px 14px; display:grid; gap:4px; }
.due-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.due-h b{ font-size:1.0625rem; }
.due-h .when{ background:var(--lav-wash); }
.dues p{ font-size:1rem; line-height:1.45; color:var(--ink-2); }

/* Cards on Today and Doctor */
.t-card{ background:var(--sheet); border:1px solid var(--edge); border-radius:20px; padding:16px; display:grid; gap:12px; min-width:0; }
.t-card-h{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; }
.t-ic{ width:46px; height:46px; border-radius:14px; background:var(--lav-wash); color:var(--lav-deep); display:grid; place-items:center; }
.t-ic .ico{ width:26px; height:26px; }
.t-card h2{ font-size:1.45rem; line-height:1.2; }
.t-card > p{ font-size:1.0625rem; line-height:1.5; color:var(--ink-2); }
.t-card.ask{ border:2px solid var(--lav); background:var(--lav-soft); }
.t-card.carer{ border-left:7px solid var(--lav); }
.t-card .btn{ justify-self:start; }
.t-card .btn.wide{ justify-self:stretch; }
.t-foot{ display:grid; gap:8px; padding-top:16px; border-top:1px solid var(--hair); font-size:1rem; line-height:1.5; color:var(--ink-2); }
.t-foot b{ color:var(--ink); }

/* Progress and what's new */
.news{ background:var(--lav-soft); border:1.5px solid var(--lav); border-radius:18px; padding:16px; display:grid; gap:10px; }
.news h3{ display:flex; align-items:center; gap:8px; font-size:1.1rem; }
.news h3 svg{ width:22px; height:22px; color:var(--lav-deep); }
.news p{ font-size:1.0625rem; line-height:1.5; color:var(--ink); }
.news .row-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.pbar{ height:12px; border-radius:6px; background:var(--lav-wash); overflow:hidden; }
.pbar span{ display:block; height:100%; width:0; background:var(--lav); border-radius:6px; transition:width .9s linear; }
.spin{ width:20px; height:20px; border-radius:50%; border:3px solid var(--lav-wash); border-top-color:var(--lav); margin:1px; flex:none; }
@media (prefers-reduced-motion: no-preference){ .spin{ animation:spin .9s linear infinite; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Files ---------- */
.f-year{ margin-top:4px; }
.doclist{ list-style:none; margin:-12px 0 0; padding:0; display:grid; gap:10px; }
.doc{ width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:14px; border-radius:18px; border:1px solid var(--edge); background:var(--sheet); color:var(--ink); text-align:left; cursor:pointer; touch-action:manipulation; }
.doc-ic{ width:50px; height:50px; border-radius:14px; background:var(--lav-wash); color:var(--lav-deep); display:grid; place-items:center; }
.doc-ic .ico{ width:28px; height:28px; }
.doc-tx{ display:grid; gap:3px; min-width:0; }
.doc-tx b{ font-size:1.0625rem; line-height:1.35; }
.doc-meta{ font-size:1rem; color:var(--ink-2); }
.doc-sum{ font-size:1rem; line-height:1.45; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.doc-flag{ font-size:1rem; font-weight:700; color:var(--warn-ink); }
.empty{ display:grid; justify-items:center; gap:10px; text-align:center; padding:28px 16px; color:var(--ink-2); font-size:1.0625rem; }
.empty .ico{ width:48px; height:48px; color:var(--lav); }

/* ---------- Doctor ---------- */
.dchips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:-8px; }
.dchip{ min-height:48px; padding:0 18px; border-radius:999px; border:1.5px solid var(--edge); background:var(--sheet); color:var(--ink); font-weight:700; font-size:1.0625rem; cursor:pointer; touch-action:manipulation; }
.dchip[aria-checked="true"]{ background:var(--lav); border-color:var(--lav); color:var(--on-lav); }
.dchip:focus-visible{ outline:2px solid var(--lav); outline-offset:2px; }
.dpack{ display:grid; gap:16px; }
.dq{ margin:0; padding-left:1.5em; display:grid; gap:10px; font-size:1.0625rem; line-height:1.5; }
.dq.bullets{ list-style:disc; }
.medrows, .resrows{ list-style:none; margin:0; padding:0; }
.medrows li{ display:grid; gap:2px; padding:10px 0; border-top:1px solid var(--hair); font-size:1rem; line-height:1.45; color:var(--ink-2); }
.medrows li:first-child{ border-top:0; padding-top:0; }
.medrows b{ color:var(--ink); font-size:1.0625rem; }
.resrows li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:10px 0; border-top:1px solid var(--hair); align-items:baseline; }
.resrows li:first-child{ border-top:0; padding-top:0; }
.resrows .rn{ font-weight:700; font-size:1.0625rem; }
.resrows .rv{ font-size:1.0625rem; font-variant-numeric:tabular-nums; text-align:right; }
.resrows .rv .f{ font-weight:800; color:var(--serious-ink); }
.resrows .rd{ grid-column:1 / -1; font-size:1rem; color:var(--ink-2); }
.visit-ta{ width:100%; font:inherit; font-size:1.0625rem; line-height:1.45; color:var(--ink); background:var(--lav-soft); border:1.5px solid var(--edge); border-radius:12px; padding:12px 14px; resize:vertical; }
.visit-ta:focus{ outline:none; border-color:var(--lav); background:var(--sheet); box-shadow:0 0 0 3px var(--lav-wash); }

/* ---------- Sheets ---------- */
.overlay{ position:fixed; inset:0; z-index:50; background:rgba(28,27,41,.5); display:grid; place-items:end center; padding:16px; padding-top:calc(16px + var(--sat)); padding-bottom:calc(16px + var(--sab)); }
.alert{ width:100%; max-width:560px; background:var(--sheet); border-radius:22px; padding:20px; display:grid; gap:12px; box-shadow:0 20px 40px rgba(0,0,0,.25); max-height:88vh; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain; }
.alert.ed{ border-top:10px solid var(--serious-ink); }
.alert.gp{ border-top:10px solid var(--warn-ink); }
.alert h2{ font-family:var(--body); font-size:1.3rem; font-weight:800; line-height:1.3; }
.alert h3{ font-size:1.1rem; }
.alert p{ font-size:1.0625rem; line-height:1.5; }
.alert .fine{ font-size:1rem; }
.alert a.btn{ text-decoration:none; }
.big-val{ font-family:var(--display); font-size:1.4rem; }
.big-val b{ font-size:2.2rem; font-weight:600; }
.menu-item{ width:100%; min-height:62px; display:grid; gap:2px; align-content:center; padding:8px 4px; border:0; border-bottom:1px solid var(--hair); background:none; color:var(--ink); text-align:left; cursor:pointer; }
.menu-item b{ font-size:1.0625rem; }
.menu-item small{ font-size:1rem; color:var(--ink-2); }
.seclist{ list-style:none; margin:0; padding:0; display:grid; }
.seclink{ width:100%; min-height:56px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; padding:6px 4px; border:0; border-bottom:1px solid var(--hair); background:none; color:var(--ink); font-size:1.0625rem; font-weight:700; text-align:left; cursor:pointer; }
.seclink .ico{ width:24px; height:24px; color:var(--lav-deep); }
.thumbs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.thumb{ display:grid; gap:6px; min-width:0; }
.thumb img{ width:100%; max-height:200px; object-fit:cover; object-position:top; border-radius:12px; border:1px solid var(--edge); }
.thumb-ic{ height:120px; border-radius:12px; border:1px solid var(--edge); background:var(--lav-soft); display:grid; place-items:center; color:var(--lav-deep); }
.thumb-ic .ico{ width:44px; height:44px; }
.thumb-name{ font-size:1rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dupe{ background:var(--warn-wash); border-radius:12px; padding:10px 12px; }
.mum-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.btn.small{ min-height:48px; padding:0 18px; font-size:1rem; }
.btn:disabled{ opacity:.5; cursor:default; }
.deep{ display:grid; gap:8px; }
.deep p{ font-size:1rem; color:var(--ink-2); }

/* ---------- Viewer for originals ---------- */
.viewer{ position:fixed; inset:0; z-index:60; background:#E6E4EE; display:flex; flex-direction:column; padding-top:var(--sat); padding-bottom:var(--sab); }
.v-bar{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--sheet); border-bottom:1px solid var(--edge); }
.v-title{ flex:1; min-width:0; font-weight:700; font-size:1.0625rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-body{ flex:1; overflow:auto; padding:10px; display:grid; gap:12px; justify-items:center; align-content:start; -webkit-overflow-scrolling:touch; }
.v-page{ background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18); max-width:none; }
.v-img{ width:100%; height:auto; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18); }
.v-status{ font-size:1.0625rem; color:var(--ink-2); padding:24px 8px; }

/* ---------- Sign in ---------- */
.signin{ max-width:440px; margin:0 auto; padding:calc(32px + var(--sat)) var(--gutter) 48px; display:grid; gap:18px; }
.signin .logo{ width:58px; height:58px; border-radius:18px; background:var(--lav); color:var(--on-lav); display:grid; place-items:center; }
.signin .logo svg{ width:32px; height:32px; }
.signin h1{ font-size:2.3rem; }
.signin form{ display:grid; gap:12px; }
.field{ display:grid; gap:6px; }
.field span{ font-weight:700; font-size:1rem; }
.field input{ font:inherit; font-size:1.0625rem; min-height:54px; padding:0 14px; border:1.5px solid var(--edge); border-radius:12px; background:var(--sheet); color:var(--ink); }
.field input:focus{ outline:none; border-color:var(--lav); box-shadow:0 0 0 3px var(--lav-wash); }
.err{ color:var(--serious-ink); font-weight:700; font-size:1rem; min-height:1.3em; }

/* ---------- Messages ---------- */
.strip-msg{ background:var(--warn-wash); border-radius:12px; padding:12px 14px; font-size:1rem; color:var(--ink); margin:8px 0 4px; }
.demo-note{ background:var(--neutral-wash); border-radius:12px; padding:10px 14px; font-size:1rem; color:var(--ink-2); margin:8px 0 4px; }
.keymsg{ display:grid; gap:10px; justify-items:start; }
details.qd > p.fine:last-child{ padding-bottom:16px; }

/* ---------- Ask Claude bar (Today) ---------- */
.askbar{ width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; min-height:64px; padding:12px 16px; border-radius:18px; border:1.5px solid var(--lav); background:var(--sheet); color:var(--ink); text-align:left; cursor:pointer; touch-action:manipulation; box-shadow:0 1px 0 rgba(30,20,80,.04); }
.askbar .ico{ width:28px; height:28px; color:var(--lav-deep); }
.askbar span{ display:grid; gap:2px; min-width:0; }
.askbar b{ font-size:1.0625rem; line-height:1.35; }
.askbar small{ font-size:1rem; line-height:1.4; color:var(--ink-2); }

/* ---------- Chat ---------- */
.viewer.chat{ background:var(--paper); }
.chat-list{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:10px; padding:16px var(--gutter, 16px); }
.msg{ max-width:88%; padding:12px 14px; border-radius:18px; font-size:1.0625rem; line-height:1.5; overflow-wrap:anywhere; }
.msg.user{ align-self:flex-end; background:var(--lav-deep); color:#fff; border-bottom-right-radius:6px; }
.msg.user b, .msg.user code{ color:#fff; }
.msg.assistant{ align-self:flex-start; background:var(--sheet); color:var(--ink); border:1px solid var(--edge); border-bottom-left-radius:6px; }
.msg.pending{ color:var(--ink-2); font-style:italic; }
.msg.error{ border-color:#B3471D; color:#B3471D; }
.msg.proposal{ align-self:stretch; max-width:none; background:var(--lav-soft); border:1.5px solid var(--lav); display:grid; gap:8px; }
.msg.proposal ul{ margin:0; padding-left:20px; display:grid; gap:4px; font-size:1rem; }
.chat-form{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; padding:10px var(--gutter, 16px); background:var(--sheet); border-top:1px solid var(--edge); }
.chat-in{ width:100%; box-sizing:border-box; font:inherit; font-size:1.0625rem; line-height:1.45; color:var(--ink); background:var(--paper); border:1.5px solid var(--edge); border-radius:14px; padding:10px 12px; min-height:48px; max-height:30vh; resize:none; }
.chat-form .btn{ min-height:48px; }
.chat-foot{ margin:0; padding:0 var(--gutter, 16px) 10px; background:var(--sheet); font-size:1rem; line-height:1.4; color:var(--ink-2); }

/* ---------- Test list for the GP (big type) ---------- */
.viewer.gp-list{ background:var(--sheet); }
.gp-body{ flex:1; overflow-y:auto; padding:20px var(--gutter, 16px) 32px; display:grid; align-content:start; gap:16px; }
.gp-body h2{ font-family:var(--display); font-weight:500; font-size:1.75rem; line-height:1.2; }
.gp-body ol{ margin:0; padding-left:28px; display:grid; gap:14px; }
.gp-body li{ font-size:1.25rem; line-height:1.4; }
.gp-body li b{ font-size:1.3rem; }
.gp-body li p{ font-size:1.0625rem; line-height:1.45; color:var(--ink-2); margin-top:2px; }
.treq li b{ display:block; }
.news.bg{ background:var(--sheet); }

/* Larger text settings: the tab bar keeps fixed sizes so four tabs always fit; everything else grows. */
.tab-label{ font-size:16px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tab{ min-width:0; }
.tab-pill{ max-width:100%; }
.askbar span{ justify-items:start; text-align:left; }

/* Sign-in: "keep your own copies" notice and its tick box */
.signin .notice{ border:2px solid var(--lav); border-radius:14px; padding:12px 14px; display:grid; gap:6px; }
.signin .check{ display:flex; gap:10px; align-items:flex-start; font-size:1rem; }
.signin .check input{ width:22px; height:22px; flex:none; margin-top:2px; }

/* Health scores: tiles, charts and the check-in */
.sc-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; }
.sc-tile{ display:grid; justify-items:center; align-content:start; text-align:center; gap:8px; padding:14px 10px; border-radius:16px; background:var(--neutral-wash); min-width:0; }
.sc-tile.s-good{ background:var(--good-wash); } .sc-tile.s-warn{ background:var(--warn-wash); } .sc-tile.s-serious{ background:var(--serious-wash); }
.sc-tx{ display:grid; gap:1px; min-width:0; }
.sc-k{ font-size:.9rem; color:var(--ink-2); }
.sc-v{ font-size:1.05rem; line-height:1.25; }
.sc-sub{ font-size:.85rem; color:var(--ink-2); }
.sc-trend{ font-size:.85rem; font-weight:700; } .sc-trend.up{ color:var(--good-ink); } .sc-trend.down{ color:var(--serious-ink); }
.sc-ring{ width:72px; height:72px; }
.sc-ring-bg{ fill:none; stroke:rgba(28,24,64,.10); stroke-width:7; }
.sc-ring-fg{ fill:none; stroke-width:7; stroke-linecap:round; }
.sc-ring-fg.t-good{ stroke:var(--good); } .sc-ring-fg.t-warn{ stroke:var(--warn); } .sc-ring-fg.t-serious{ stroke:var(--serious); }
.sc-ring-n{ font-family:var(--display); font-size:20px; font-weight:600; fill:var(--ink); }
.sc-age{ display:grid; justify-items:center; min-width:60px; line-height:1; }
.sc-age{ min-height:72px; align-content:center; }
.sc-age b{ font-family:var(--display); font-size:2.6rem; font-weight:600; }
.sc-age small{ font-size:.8rem; color:var(--ink-2); margin-top:3px; }
.sc-prog{ display:grid; gap:8px; }
.sc-bar{ display:grid; grid-template-columns:7.5em minmax(0,1fr) auto; align-items:center; gap:10px; font-size:.95rem; }
.sc-bar small{ color:var(--ink-2); }
.sc-sec{ display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--hair); }
.sc-sec p{ font-size:1rem; line-height:1.5; }
.sc-chart{ margin:0; }
.sc-chart svg{ width:100%; height:auto; display:block; }
.sc-chart .grid{ stroke:var(--hair); stroke-width:1; }
.sc-chart .tick{ font-size:11px; fill:var(--muted); font-family:var(--body); }
.sc-chart .zone-old{ fill:var(--serious-wash); opacity:.55; } .sc-chart .zone-young{ fill:var(--good-wash); opacity:.8; }
.sc-chart .zone-lab{ font-size:11px; fill:var(--ink-2); font-weight:700; }
.sc-chart .actual{ stroke:var(--ink-2); stroke-width:1.5; stroke-dasharray:5 4; }
.sc-chart .actual-lab{ font-size:11px; fill:var(--ink-2); }
.sc-chart .band-good{ fill:var(--good-wash); } .sc-chart .band-warn{ fill:var(--warn-wash); } .sc-chart .band-serious{ fill:var(--serious-wash); }
.sc-chart .line{ fill:none; stroke-width:2.5; stroke-linejoin:round; }
.sc-chart .dot{ stroke:var(--sheet); stroke-width:2; }
.sc-chart .pheno{ stroke:var(--lav); } .sc-chart .dot.pheno{ fill:var(--lav); }
.sc-chart .lab0{ stroke:#0E7C7B; } .sc-chart .dot.lab0{ fill:#0E7C7B; }
.sc-chart .lab1{ stroke:#B0477A; } .sc-chart .dot.lab1{ fill:#B0477A; }
.sc-keys{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.9rem; color:var(--ink-2); margin-top:6px; }
.sc-keys span{ display:inline-flex; align-items:center; gap:6px; }
.sc-keys .sw{ width:16px; height:4px; border-radius:2px; display:inline-block; }
.sc-keys .sw.pheno{ background:var(--lav); } .sc-keys .sw.lab0{ background:#0E7C7B; } .sc-keys .sw.lab1{ background:#B0477A; }
.sc-keys .sw.actual{ background:repeating-linear-gradient(90deg, var(--ink-2) 0 5px, transparent 5px 9px); height:2px; }
.sc-parts{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sc-parts li{ display:grid; gap:4px; }
.sc-part-h{ display:flex; justify-content:space-between; gap:10px; font-size:1rem; }
.sc-parts small{ color:var(--ink-2); font-size:.9rem; }
.sc-parts .pbar{ height:9px; }
.sc-parts .s-good .pbar span{ background:var(--good); } .sc-parts .s-warn .pbar span{ background:var(--warn); } .sc-parts .s-serious .pbar span{ background:var(--serious); }
.sc-bar .pbar span{ transition:none; }
.sc-born{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sc-born input{ font:inherit; min-height:48px; padding:0 12px; border:1.5px solid var(--edge); border-radius:12px; background:var(--sheet); color:var(--ink); }
.sc-method{ display:grid; gap:10px; padding-bottom:12px; font-size:.98rem; line-height:1.5; color:var(--ink-2); }
.sc-q{ border:0; padding:0; margin:0; display:grid; gap:8px; min-width:0; }
.sc-q legend{ font-weight:700; font-size:1.05rem; padding:0; margin-bottom:4px; }
.sc-q .opt{ min-height:44px; padding:0 14px; font-size:.95rem; }
.sc-q .field input{ font:inherit; min-height:48px; padding:0 12px; border:1.5px solid var(--edge); border-radius:12px; width:100%; }
.cost-chart .est{ fill:var(--sheet); stroke:var(--ink-2); stroke-width:1.5; }
.cost-chart .act.free{ fill:var(--neutral); } .cost-chart .act.full{ fill:var(--lav); }
.cost-chart .miss{ stroke:var(--rule); stroke-width:1.5; }
.cost-tbl{ width:100%; border-collapse:collapse; font-size:.95rem; }
.cost-tbl th, .cost-tbl td{ text-align:left; padding:6px 4px; border-bottom:1px solid var(--hair); }
.cost-tbl td.n{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Welcome, the tour and the "it takes a while" sheet ----------
   One memorable moment: the hero drawing of a health story that flows from years of results into one report.
   It draws itself once on the sign-in screen; everything around it stays quiet. */
.ob-art{ display:block; width:100%; height:auto; aspect-ratio:240 / 160; flex:none; }
.ob-art .disc{ fill:var(--lav-wash); }
.ob-art .flow{ fill:none; stroke:var(--lav); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.ob-art .dots circle{ fill:var(--sheet); stroke:var(--lav-deep); stroke-width:2.6; }
.ob-art .page rect{ fill:var(--sheet); stroke:var(--lav-deep); stroke-width:2.6; }
.ob-art .page path{ stroke:var(--lav); stroke-width:2.6; stroke-linecap:round; }
.ob-art .yr text{ font-family:var(--body, inherit); font-size:10px; font-weight:700; fill:var(--muted); }
.ob-art .lens circle{ fill:rgba(255,255,255,.55); stroke:var(--ink-2); stroke-width:3; }
.ob-art .lens path{ stroke:var(--ink-2); stroke-width:6; stroke-linecap:round; }
.ob-art .band{ stroke:var(--good-ink); stroke-width:1.6; stroke-dasharray:4 5; opacity:.55; }
.ob-art .ghost circle{ fill:none; stroke:var(--rule); stroke-width:2; stroke-dasharray:3 3; }
.ob-art .ring-bg{ fill:none; stroke:var(--sheet); stroke-width:9; }
.ob-art .ring{ fill:none; stroke:var(--warn); stroke-width:9; stroke-linecap:round; }
.ob-art .list rect{ fill:var(--sheet); stroke:var(--hair); stroke-width:1.5; }
.ob-art .ticks path{ fill:none; stroke:var(--good-ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ob-art .shield{ fill:var(--sheet); stroke:var(--lav-deep); stroke-width:3; stroke-linejoin:round; }
.draw .flow{ stroke-dasharray:260; stroke-dashoffset:260; animation:ob-draw 1.6s cubic-bezier(.3,.6,.2,1) .25s forwards; }
.draw .dots circle, .draw .page{ opacity:0; transform-box:fill-box; transform-origin:center; animation:ob-pop .45s ease-out forwards; }
.draw .dots circle:nth-child(1){ animation-delay:.35s } .draw .dots circle:nth-child(2){ animation-delay:.55s } .draw .dots circle:nth-child(3){ animation-delay:.75s }
.draw .dots circle:nth-child(4){ animation-delay:.95s } .draw .dots circle:nth-child(5){ animation-delay:1.15s } .draw .dots circle:nth-child(6){ animation-delay:1.35s }
.draw .page{ animation-delay:1.6s; }
@keyframes ob-draw{ to{ stroke-dashoffset:0; } }
@keyframes ob-pop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }

.welcome{ max-width:520px; margin:0 auto; padding:calc(20px + var(--sat)) var(--gutter) calc(40px + var(--sab)); display:grid; gap:22px; }
body:has(.welcome){ padding-bottom:0; }
.w-hero{ display:grid; gap:14px; }
.w-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.0625rem; color:var(--lav-deep); }
.w-brand .ico{ width:30px; height:30px; padding:6px; border-radius:10px; background:var(--lav); color:var(--on-lav); }
.w-art{ max-width:340px; margin:4px auto 0; }
.w-title{ font-family:var(--display); font-weight:500; font-size:clamp(2.1rem, 9vw, 2.9rem); line-height:1.08; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
.w-lead{ font-size:1.125rem; line-height:1.55; color:var(--ink-2); max-width:34ch; text-wrap:pretty; }
.w-how{ justify-self:start; font:inherit; font-weight:700; font-size:1.0625rem; color:var(--lav-deep); background:none; border:0; padding:6px 0; min-height:44px; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; cursor:pointer; }
.w-how:focus-visible{ outline:2px solid var(--lav); outline-offset:3px; border-radius:6px; }
.welcome .signin{ max-width:none; margin:0; padding:20px 18px 22px; background:var(--sheet); border:1px solid var(--edge); border-radius:24px; box-shadow:0 18px 40px -22px rgba(28,24,64,.35); }
.welcome .signin h2{ font-family:var(--display); font-weight:500; font-size:1.55rem; line-height:1.2; }

.onboard{ position:fixed; inset:0; z-index:80; background:rgba(28,27,41,.5); display:grid; place-items:end center; animation:ob-fade .2s ease-out; }
.onboard.leaving{ opacity:0; transition:opacity .18s; }
@keyframes ob-fade{ from{ opacity:0; } }
.ob-card{ width:min(100%, 540px); max-height:min(94dvh, 900px); background:var(--sheet); border-radius:28px 28px 0 0; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:14px var(--gutter) calc(14px + var(--sab)); box-shadow:0 -20px 50px -20px rgba(28,24,64,.4); animation:ob-rise .32s cubic-bezier(.2,.8,.2,1); }
@keyframes ob-rise{ from{ transform:translateY(40px); opacity:.4; } }
@media (min-width:640px){ .onboard{ place-items:center; } .ob-card{ border-radius:28px; } }
.ob-top{ display:flex; align-items:center; justify-content:space-between; min-height:48px; }
.ob-dots{ display:flex; gap:6px; }
.ob-dots span{ width:8px; height:8px; border-radius:4px; background:var(--hair); transition:width .25s, background .25s; }
.ob-dots span.on{ width:24px; background:var(--lav); }
.ob-skip{ font:inherit; font-weight:700; font-size:1rem; color:var(--ink-2); background:none; border:0; min-height:48px; padding:0 4px; cursor:pointer; }
.ob-stage{ overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:12px; padding:4px 2px 12px; }
.ob-stage > *{ flex:none; }
.ob-stage .ob-art{ width:min(100%, 280px); margin:0 auto 4px; }
.ob-title{ font-family:var(--display); font-weight:500; font-size:clamp(1.75rem, 7vw, 2.2rem); line-height:1.12; letter-spacing:-.01em; text-wrap:balance; outline:none; }
.ob-p{ font-size:1.125rem; line-height:1.55; color:var(--ink-2); text-wrap:pretty; }
.ob-p b{ color:var(--ink); }
.ob-sub{ font-weight:700; font-size:1.0625rem; margin-top:4px; }
.ob-collect, .ob-gets{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ob-collect li{ display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:10px; font-size:1.0625rem; line-height:1.4; }
.ob-collect li::before{ content:""; grid-row:span 2; width:20px; height:20px; margin-top:2px; border-radius:6px; border:2px solid var(--lav); background:var(--lav-soft); }
.ob-collect li span{ grid-column:2; color:var(--muted); font-size:1rem; }
.ob-gets li{ display:grid; gap:2px; padding:12px 14px; border-radius:16px; background:var(--lav-soft); border-left:5px solid var(--lav); }
.ob-gets li b{ font-size:1.0625rem; }
.ob-gets li span{ color:var(--ink-2); line-height:1.45; }
.ob-nav{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; padding-top:10px; border-top:1px solid var(--hair); }
.ob-nav .btn:last-child{ width:100%; }

.underway{ text-align:left; }
.uw-art{ position:relative; width:104px; height:104px; margin:6px auto 2px; display:grid; place-items:center; }
.uw-art .uw-ico{ position:relative; width:46px; height:46px; color:var(--lav-deep); }
.uw-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--lav); opacity:0; animation:uw-pulse 3.2s ease-out infinite; }
.uw-ring.r0{ background:var(--lav-wash); border-color:transparent; opacity:1; animation:none; }
.uw-ring.r2{ animation-delay:1.6s; }
@keyframes uw-pulse{ 0%{ transform:scale(.8); opacity:.7; } 100%{ transform:scale(1.35); opacity:0; } }
.underway h2{ text-align:center; font-family:var(--display); font-weight:500; font-size:1.75rem; line-height:1.15; }
.underway .lead{ text-align:center; color:var(--ink-2); font-size:1.0625rem; line-height:1.5; }
.uw-list{ list-style:none; margin:4px 0; padding:0; display:grid; gap:10px; }
.uw-list li{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:center; font-size:1.0625rem; line-height:1.45; }
.uw-list .ico{ width:38px; height:38px; padding:8px; border-radius:12px; background:var(--lav-wash); color:var(--lav-deep); }
.news.bg.full{ border-color:var(--lav-deep); }
.bg-acts{ display:flex; flex-wrap:wrap; gap:10px; }

.install-banner .ib-top{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:center; }
.ib-icon{ width:52px; height:52px; border-radius:14px; box-shadow:0 4px 10px rgba(28,24,64,.18); }
.install{ display:grid; gap:10px; }
.install .steps{ margin:0; padding-left:1.4em; display:grid; gap:8px; font-size:1.0625rem; line-height:1.45; }
.inline-ico{ width:1.15em; height:1.15em; vertical-align:-.2em; color:var(--lav-deep); }

.pay-box{ display:none; }
.pay-box.open{ display:block; min-height:440px; border-radius:16px; overflow:hidden; background:var(--sheet); border:1px solid var(--edge); }
.big-val.pop{ animation:ob-pop .45s ease-out; color:var(--good-ink); }

@media (prefers-reduced-motion: reduce){
  .draw .flow{ animation:none; stroke-dashoffset:0; }
  .draw .dots circle, .draw .page{ animation:none; opacity:1; }
  .uw-ring{ animation:none; }
  .onboard, .ob-card, .big-val.pop{ animation:none; }
}