/* Relive Health brand — white plane · logo cyan · slate wordmark */ /* ============================================================ THEME CONTROL LAYER Every color in the app resolves to a token below — no raw hex/rgba in component rules. A theme ("scheme") is one override block: :root[data-theme="dark"] { ...token overrides... } app/theme.js owns which block is active (light | dark) and the picker UI renders from its registry, so adding, replacing, or scrapping schemes never touches component CSS. Two token families: - Base tokens: the page plane, cards, sidebar — the main theme. - --island-*: the "always-light" component family (attn rows, queue cards, panel heads…) that sits on its own background regardless of the plane. Each scheme restyles both families. ============================================================ */ :root { color-scheme: light; /* Light (default scheme) — relivehealth.com faithful: white base, #f5f5f5 alternates, slate #3f5c74 headings, cyan #39bcdd CTAs. The logo asset is the site's navy wordmark, built for light backgrounds, so sidebar and gate stay light here. */ --plane-a: #f7fafc; --plane-b: #e9eff4; --plane: linear-gradient(135deg, var(--plane-a) 0%, var(--plane-b) 100%); --surface: #ffffff; --surface-2: #f5f5f5; --ink: #2b3f52; --ink-2: #4a6074; --muted: #7a8b9b; --grid: #e6edf3; --border: rgba(42, 63, 82, 0.12); --border-strong: rgba(42, 63, 82, 0.24); --accent: #39bcdd; --accent-soft: rgba(57, 188, 221, 0.16); --accent-ink: #fff; --accent-deep: #157e99; /* Fixed brand navy — background use only (ID card / hero gradients, PHI banner). Text-on-accent-wash uses --accent-quiet-ink so dark scheme can lighten it. */ --relive-slate: #3f5c74; --accent-quiet-ink: #2c637a; /* Hero-card gradient start (ID card / Health Score) and lab-chart callout bubble — these need per-scheme values because they sit dark in dark schemes, light in light. */ --hero-from: #d9e7f0; --chart-bubble: #3f5c74; --good: #0c8f63; --good-soft: rgba(12, 143, 99, 0.12); --warn: #c47b00; --warn-soft: rgba(196, 123, 0, 0.14); --danger: #c23b3b; --danger-soft: rgba(194, 59, 59, 0.12); --purple: #8b5cf6; --info: #5b6ee1; --info-deep: #3f51c9; /* PHR timeline section rails — categorical coding, not decoration */ --rail-vitals: #3b82f6; --rail-symptoms: #f59e0b; --rail-progress: #10b981; --rail-protocol: #8b5cf6; --rail-lab: #06b6d4; /* Always-light island family (see header comment) */ --island-bg: #ffffff; --island-ink: #2a3f52; --island-ink-2: #4a6074; --island-muted: #7a90a3; --island-grid: #e6edf3; --island-border: rgba(42, 63, 82, 0.09); --island-border-strong: rgba(42, 63, 82, 0.14); --island-surface-2: #f3f7fa; --island-good: #0c8f63; --island-warn: #c47b00; --island-warn-deep: #8a5a00; --island-danger: #c23b3b; --accent-wash: #e3f4fa; --backdrop: rgba(15, 30, 42, .38); --shadow: 0 6px 20px rgba(42, 63, 82, .10), 0 2px 6px rgba(42, 63, 82, .06); --radius: 12px; /* 8pt spacing scale (with 4/12 half-steps) — patient-side density pass */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --safe-b: env(safe-area-inset-bottom, 0px); --sidebar-w: 236px; --font: "DM Sans", "SF Pro Text", system-ui, -apple-system, "Segoe UI", sans-serif; --side-bg: linear-gradient(135deg, var(--plane-a) 0%, var(--plane-b) 100%); --side-ink: #2b3f52; --side-muted: #718496; --side-hover: rgba(42, 63, 82, 0.06); --side-active: rgba(57, 188, 221, 0.14); --side-border: rgba(42, 63, 82, 0.10); --topbar-veil: rgba(255, 255, 255, 0.82); } /* ============================================================ Scheme: Dark — relivehealth.com brand palette (slate #3f5c74, cyan #39bcdd) dropped to true dark. Selected by app/theme.js setting data-theme on before styles.css paints. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --plane-a: #223b4f; --plane-b: #101d29; --hero-from: var(--relive-slate); --chart-bubble: var(--plane-b); --surface: #263c50; --surface-2: #1c2e3e; --ink: #f2f7fa; --ink-2: #cfdde6; --muted: #8fa9bc; --grid: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.14); --border-strong: rgba(255, 255, 255, 0.26); --accent: #3fc4e2; --accent-soft: rgba(63, 196, 226, 0.20); --accent-deep: #0e3a52; --relive-slate: #3f5c74; --accent-quiet-ink: #c9ecf6; --info: #7d8bf5; --info-deep: #aab4ff; --island-bg: #1a2c3b; --island-ink: #e8f1f6; --island-ink-2: #c2d4de; --island-muted: #7f98a8; --island-grid: rgba(255, 255, 255, 0.10); --island-border: rgba(255, 255, 255, 0.12); --island-border-strong: rgba(255, 255, 255, 0.20); --island-surface-2: #24384a; --island-good: #4ade80; --island-warn: #fbbf24; --island-warn-deep: #fbbf24; --island-danger: #f87171; --accent-wash: #133647; --backdrop: rgba(0, 0, 0, .6); --shadow: 0 6px 20px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .28); --side-ink: #ffffff; --side-muted: #a3bccb; --side-hover: rgba(255, 255, 255, 0.06); --side-active: rgba(255, 255, 255, 0.11); --side-border: rgba(255, 255, 255, 0.12); --topbar-veil: rgba(12, 22, 31, 0.78); --good: #4ade80; --good-soft: rgba(74, 222, 128, 0.18); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.18); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.18); --purple: #c4b5fd; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--plane); /* Mobile browsers "helpfully" inflate text in wide/zoomed layouts, changing sizes unpredictably per element (first noticed on the Health Tools tiles). Never do that — text renders at exactly its authored size app-wide. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Belt-and-suspenders: the page should only ever scroll vertically, like a native app. Any element that overflows horizontally (a bug, not a feature) gets clipped here instead of dragging the whole page sideways; containers that legitimately need horizontal scroll (tables, charts) already opt in with their own overflow-x:auto. */ overflow-x: hidden; } body { font-family: var(--font); background: var(--plane); color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; } /* ===== App shell: sidebar + content ===== */ .app-shell { min-height: 100vh; min-height: 100dvh; display: flex; background: var(--plane); } .app-shell.gate-mode { display: block; } .app-shell.gate-mode .sidebar { display: none !important; } .app-shell.gate-mode .shell-main { max-width: 480px; margin: 0 auto; min-height: 100dvh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; padding: 16px 12px 14px; position: sticky; top: 0; height: 100dvh; z-index: 40; border-right: 1px solid var(--side-border); box-shadow: 4px 0 24px rgba(42, 63, 82, .04); } .sidebar[hidden] { display: none !important; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; border-bottom: 1px solid var(--side-border); margin-bottom: 12px; } .sidebar-logo { display: block; height: 36px; width: auto; max-width: 168px; object-fit: contain; object-position: left center; transition: filter .16s ease, transform .16s ease; } .sidebar-logo:hover { filter: brightness(1.12); transform: scale(1.03); } .sidebar-logo-icon { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; } /* fallback if image fails */ .sidebar-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 820; font-size: .95rem; letter-spacing: -.04em; display: none; place-items: center; box-shadow: 0 6px 16px rgba(0, 184, 224, .3); } .sidebar-title { font-weight: 760; font-size: .98rem; letter-spacing: -.03em; color: var(--side-ink); } .sidebar-sub { font-size: .72rem; color: var(--side-muted); margin-top: 1px; } .who-clinic { margin: 2px 0 8px; font-size: .72rem; opacity: .75; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; } .sidebar-nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: none; background: transparent; color: var(--side-muted); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; } .sidebar-nav button:hover { background: var(--side-hover); color: var(--side-ink); } .sidebar-nav button.on { background: var(--side-active); color: var(--side-ink); font-weight: 700; } .sidebar-nav button.on .tab-icon { color: var(--accent); } .sidebar-nav .tab-icon { position: relative; display: inline-flex; width: 22px; justify-content: center; flex-shrink: 0; } .sidebar-nav svg { width: 18px; height: 18px; } .sidebar-nav .tab-label { flex: 1; } .sidebar-nav .tab-badge { position: static; margin-left: auto; min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; font-size: .68rem; background: var(--danger); box-shadow: none; } .sidebar-nav .mobile-more { display: none; } .sidebar-role-line { padding: 0 10px 10px; font-size: .72rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); } .sidebar-foot { padding: 12px 10px 4px; border-top: 1px solid var(--side-border); margin-top: 10px; font-size: .78rem; color: var(--side-muted); } .sidebar-foot .who { color: var(--side-ink); font-weight: 650; margin-bottom: 8px; } .sidebar-foot .btn-logout { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--side-border); background: transparent; color: var(--side-muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; } .sidebar-foot .btn-logout:hover { color: var(--side-ink); border-color: var(--accent); background: var(--accent-soft); } .msg-thread-card { display: flex; flex-direction: column; } .msg-thread-list { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 2px 2px 6px; } .msg-row { display: flex; flex-direction: column; max-width: 78%; } .msg-row.mine { align-self: flex-end; align-items: flex-end; } .msg-row.theirs { align-self: flex-start; align-items: flex-start; } .msg-bubble { padding: 9px 13px; border-radius: 14px; font-size: .88rem; line-height: 1.42; word-break: break-word; white-space: pre-wrap; background: var(--surface-2); color: var(--ink); } .msg-row.mine .msg-bubble { background: var(--accent); color: var(--accent-ink); } .msg-bubble.skeleton-bubble { height: 34px; background: var(--surface-2); background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .10) 50%, transparent 70%); background-size: 200% 100%; background-repeat: no-repeat; } .skeleton-block { height: 12px; border-radius: 6px; background: var(--surface-2); background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .10) 50%, transparent 70%); background-size: 200% 100%; background-repeat: no-repeat; } @media (prefers-reduced-motion: no-preference) { .msg-bubble.skeleton-bubble, .skeleton-block { animation: skeleton-shimmer 1.3s ease-in-out infinite; } @keyframes skeleton-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } } } .msg-meta { margin-top: 4px; padding: 0 2px; } .msg-compose-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .msg-compose-row textarea { flex: 1; min-width: 0; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; } .msg-compose-row .btn { width: auto; flex-shrink: 0; } .msg-compose-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .msg-compose-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .ai-badge { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; background: var(--accent-soft); color: var(--accent); vertical-align: middle; margin-left: 4px; } .ai-msg-source { margin-top: 3px; padding: 0 2px; font-style: italic; } .ai-msg-escalation-note { margin-top: 4px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: .76rem; max-width: 100%; } .ai-emergency-banner { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); font-size: .85rem; margin-bottom: 10px; } .ai-emergency-banner b { font-size: .92rem; } .send-to-care-team-link { background: none; border: none; padding: 0; font-size: .74rem; color: var(--muted); text-decoration: underline; cursor: pointer; text-align: right; } .shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; max-height: 100dvh; overflow: hidden; background: var(--plane); } main { flex: 1; /* Vertical-only: main is the app's real scroll container, so the html/body overflow-x guard doesn't reach it — anything wider than the viewport gets clipped here instead of enabling sideways panning. Containers that need horizontal scroll (tables, charts, tab rows) opt in with their own overflow-x: auto. */ overflow-x: hidden; overflow-y: auto; padding: 18px 24px 48px; animation: fade .18s ease; background: var(--plane); } main.no-tabs { padding: 28px 20px 40px; background: var(--plane); } @keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* Shared expressive-motion vocabulary (2026-08-01) — layered on top of the app's existing subtle/functional transitions. Used sparingly and one-shot, never idle/looping. Gated behind prefers-reduced-motion since these read more than the app's baseline fades/slides. */ :root { --ease-spring: cubic-bezier(.34, 1.56, .64, 1); } @media (prefers-reduced-motion: no-preference) { @keyframes rise-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes sheen { from { transform: translateX(-120%) rotate(8deg); } to { transform: translateX(220%) rotate(8deg); } } .rise-in { animation: rise-in .42s var(--ease-spring) both; } @keyframes badge-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } .badge-pop { animation: badge-pop .3s var(--ease-spring) both; } /* Staggered content reveal for page-level lists/grids — replays on every render of the page it's on (unlike the one-shot sheen above), same as any ordinary page-transition would. */ .stagger-in > * { opacity: 0; animation: rise-in .36s var(--ease-spring) both; } .stagger-in > *:nth-child(1) { animation-delay: .02s; } .stagger-in > *:nth-child(2) { animation-delay: .05s; } .stagger-in > *:nth-child(3) { animation-delay: .08s; } .stagger-in > *:nth-child(4) { animation-delay: .11s; } .stagger-in > *:nth-child(n+5) { animation-delay: .13s; } .sheen-once { position: relative; overflow: hidden; } .sheen-once::after { content: ""; position: absolute; top: -40%; left: 0; width: 40%; height: 180%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); pointer-events: none; animation: sheen 1.1s ease-out .15s 1 both; } /* Lab trend chart reveal (app/chart.js) — line draws in via the pathLength=1 trick so the dash math works regardless of actual path geometry, dots/callout follow once it lands. */ @keyframes chart-draw { to { stroke-dashoffset: 0; } } .chart-line-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chart-draw .6s ease-out .1s both; } @keyframes chart-fade-in { to { opacity: 1; } } .chart-area-fade { opacity: 0; animation: chart-fade-in .5s ease-out .15s both; } @keyframes chart-dot-in { to { opacity: 1; transform: scale(1); } } .chart-dot-pop { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; animation: chart-dot-in .3s var(--ease-spring) both; } @keyframes chart-callout { to { opacity: 1; transform: scale(1); } } .chart-callout-in { opacity: 0; transform: scale(.85); transform-box: fill-box; transform-origin: center; animation: chart-callout .3s var(--ease-spring) .65s both; } @keyframes chart-band-grow { from { width: 0; } } .chart-band-grow { animation: chart-band-grow .5s ease-out .1s both; } @keyframes chart-dot-single { to { opacity: 1; } } .chart-dot-single-in { opacity: 0; animation: chart-dot-single .3s ease-out .5s both; } /* Health Score hero ring — each render has a different target fill (--ring-offset), so this can't be one fixed keyframe; animate FROM full-empty TO whatever this instance's var() is. */ @keyframes ring-fill { from { stroke-dashoffset: 1; } to { stroke-dashoffset: var(--ring-offset, 0); } } .score-ring-fill { animation: ring-fill .8s var(--ease-spring) both; } } /* Base/reduced-motion state for the ring fill — always correct even without the animation above. */ .score-ring-fill { stroke-dasharray: 1; stroke-dashoffset: var(--ring-offset, 0); } /* Soft brand-gradient halo around the score ring (2026-08-06). Two accent-tinted shadows on the whole SVG, not the fill circle, so the glow stays a steady halo instead of growing with the draw-in animation. var()-based → follows each theme scheme. */ .score-ring { filter: drop-shadow(0 0 5px var(--accent-soft)) drop-shadow(0 1px 10px var(--accent-soft)); } h1 { font-size: 1.45rem; font-weight: 720; letter-spacing: -.03em; line-height: 1.15; } h2 { font-size: 1rem; font-weight: 680; letter-spacing: -.01em; margin-bottom: 8px; } h3 { font-size: .92rem; font-weight: 650; } .sub { color: var(--ink-2); font-size: .9rem; } .muted { color: var(--muted); } .small { font-size: .8rem; } .mono { font-variant-numeric: tabular-nums; } /* content header */ header.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: var(--topbar-veil); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); flex-shrink: 0; } .page-title { font-weight: 720; font-size: 1.05rem; letter-spacing: -.02em; } .page-title span { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); margin-top: 1px; } .brand { font-weight: 780; letter-spacing: -.02em; font-size: .95rem; } .brand span { color: var(--muted); font-weight: 500; font-size: .78rem; margin-left: 4px; } /* Wraps to a second line rather than overflowing, since the pills below no longer shrink. */ .header-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } /* Shared geometry for every pill in the header row. Without `nowrap` + `flex: 0 0 auto` these are flex children that shrink below their own content width, which squeezed the label inside the pill. The 1px transparent border keeps them the same height as .header-badge, which has a real border. */ .role-pill, .header-badge { white-space: nowrap; flex: 0 0 auto; padding: 6px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em; border: 1px solid transparent; } .role-pill { background: var(--accent-soft); color: var(--accent); } .role-pill.patient { background: var(--good-soft); color: var(--good); } .icon-btn { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); cursor: pointer; } .icon-btn:hover { color: var(--ink); } /* Dashboard layout */ .dash-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } @media (min-width: 960px) { .dash-grid { grid-template-columns: 1.15fr .85fr; gap: 18px; } } .dash-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--grid); background: var(--island-bg); } .panel-head h2 { margin: 0; font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .panel-body { padding: 12px 16px 14px; } .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); box-shadow: none; } .kpi .n { font-size: 1.35rem; font-weight: 760; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); } .kpi .t { font-size: .7rem; color: var(--muted); margin-top: 4px; font-weight: 600; line-height: 1.25; } .kpi.warn .n { color: var(--warn); } .kpi.accent .n { color: var(--accent); } .kpi.danger .n { color: var(--danger); } .kpi.good .n { color: var(--good); } .row-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--grid); } .row-item:last-child { border-bottom: none; padding-bottom: 2px; } .row-item:first-child { padding-top: 2px; } .row-item .body { flex: 1; min-width: 0; } .row-item .title { font-weight: 650; font-size: .92rem; letter-spacing: -.01em; } .row-item .meta { font-size: .78rem; color: var(--muted); margin-top: 2px; } .row-item .cta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } button.row-item { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--grid); text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; padding: 11px 8px; transition: background .12s ease; } button.row-item:hover { background: var(--surface-2); } .row-item.active { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; background: var(--accent-soft); border-bottom-color: transparent; } .compact-actions { display: flex; flex-wrap: wrap; gap: 6px; } .page-hero { margin-bottom: 14px; } .page-hero h1 { margin-bottom: 4px; font-size: 1.35rem; letter-spacing: -.03em; } .page-hero .sub { max-width: 56ch; font-size: .86rem; color: var(--muted); } /* Today’s pulse strip on dashboard */ .day-pulse { margin: 0 0 14px; padding: 12px 14px; background: var(--island-bg); border: 1px solid var(--border); border-radius: var(--radius); } .day-pulse-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; } .day-pulse-label { font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); } .day-pulse-text { font-size: .86rem; color: var(--ink-2); } .day-pulse-text b { color: var(--ink); font-weight: 720; font-variant-numeric: tabular-nums; } .day-pulse-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .day-pulse-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--good) 70%, var(--accent))); border-radius: 99px; min-width: 0; transition: width .25s ease; } /* Visit prep checklist on schedule / complete sheet */ .visit-prep { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--grid); } .visit-prep.in-sheet { margin: 0 0 14px; background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 20%, var(--border)); } .visit-prep-label { font-size: .65rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; } .visit-prep-list { margin: 0; padding-left: 1.1em; font-size: .8rem; color: var(--ink-2); line-height: 1.4; } .visit-prep-list li { margin: 2px 0; } .appt-row-clean { align-items: flex-start; } /* Patient care alerts */ .alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .alerts-list { display: flex; flex-direction: column; gap: 8px; } .alert-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border-radius: 11px; border: 1px solid var(--grid); background: var(--island-bg); } .alert-row.unread { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 45%, var(--island-bg)); } .alert-row .body { flex: 1; min-width: 0; } .alert-row .title { font-weight: 680; font-size: .9rem; } .alert-row .meta { font-size: .8rem; color: var(--ink-2); margin-top: 3px; line-height: 1.35; } .alert-row .cta { flex-shrink: 0; } .pref-row { display: flex !important; align-items: center; gap: 8px; margin: 8px 0; font-size: .9rem; font-weight: 550; } .pref-row input { width: auto; min-height: auto; } /* Mobile: bottom nav instead of left sidebar */ @media (max-width: 860px) { .app-shell:not(.gate-mode) { flex-direction: column; } .sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: auto; flex-direction: row; align-items: center; padding: 6px 4px max(8px, var(--safe-b)); border-right: none; border-top: 1px solid var(--side-border); z-index: 50; } .sidebar-brand, .sidebar-foot, .sidebar-role-line { display: none !important; } .sidebar-nav { flex-direction: row; flex-wrap: nowrap; width: 100%; gap: 2px; } .sidebar-nav button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 8px 4px; font-size: .62rem; text-align: center; position: relative; } /* Bottom bar shows 4 primary tabs + More — no horizontal scrolling on mobile. The rest of the destinations live in the More sheet (see mountSheet 'more-menu'). */ .sidebar-nav .mobile-hide { display: none !important; } .sidebar-nav .mobile-more { display: flex; } .sidebar-nav .tab-label { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sidebar-nav .tab-badge { position: absolute; top: 2px; right: 4px; margin: 0; } .shell-main { max-height: none; padding-bottom: calc(72px + var(--safe-b)); } main { padding: 14px 14px 28px; } header.top { padding: 12px 14px; } } /* cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-2); box-shadow: var(--shadow); } .card.soft { background: var(--surface-2); box-shadow: none; } .card.clickable { cursor: pointer; transition: border-color .12s, transform .12s; } .card.clickable:active { transform: scale(.995); } .card.clickable:hover { border-color: var(--accent); } .section-label { font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: var(--sp-5) 0 var(--sp-2) 2px; } /* Patient dashboard modular grid — one hero card up top, half/full-width cards below it, instead of a flat stack of equal-weight cards (patient side only). Children default to full width; .card--half opts into sharing a row once there's room for two. */ .patient-grid { display: grid; /* minmax(0,1fr) + item min-width:0, not bare 1fr: Safari (unlike Chrome) doesn't let a nested ellipsis reset a grid item's min-content, so the priority banner's single-line sentence (~635px) blew the whole dashboard grid past an iPhone screen — every card stretched and clipped. Diagnosed live via ?debug=w on 2026-08-06. */ grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); min-width: 0; } .patient-grid > * { grid-column: 1 / -1; margin-bottom: 0; min-width: 0; } @media (min-width: 720px) { .patient-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .patient-grid > .card--half { grid-column: auto; } } /* Active Medication + Health Reminders — the one pairing that stays side-by-side at every width, including narrow phones, unlike .card--half above (gated to >=720px). Each tile gets tighter padding/chevron inset and single-line ellipsis-truncated title so two of them can share a phone-width row without wrapping or overflowing. */ .dashboard-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); grid-column: 1 / -1; } .dashboard-pair > * { /* Grid items default to min-width:auto (their min-content size) — without this, a long title forces the 1fr track wider than available space, overflowing the whole page horizontally on narrow phones instead of the title just truncating. This was the actual bug. */ min-width: 0; } .dashboard-pair .medcard-collapsed { padding-left: 14px; padding-right: 30px; } .dashboard-pair .idcard-chevron { right: 8px; } .dashboard-pair .medcard-collapsed > div:first-child { min-width: 0; overflow: hidden; } .dashboard-pair .idcard-name-row { min-width: 0; } .dashboard-pair .idcard-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-pair .small.muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Spot illustrations on dashboard tiles (Toby's 2026-08-06 mockup) — SPOT_ART in app.js. Care Summary gets a side-by-side flex (text column + large clipboard art); the paired Active Medication / Health Reminders cards get a small art slot pushed against the chevron by their existing space-between flex. Art never shrinks; the text columns truncate instead. */ .care-summary-flex { display: flex; align-items: center; gap: var(--sp-3); } .care-summary-main { flex: 1; min-width: 0; } .card-spot-art { flex-shrink: 0; display: flex; align-items: center; } .card-spot-art svg { width: 88px; height: auto; display: block; } .card-spot-art--sm svg { width: 36px; } .card-spot-art--cal { margin-left: auto; align-self: center; } .card-spot-art--cal svg { width: 78px; } /* Phone-width breathing room (raised 380→540 after on-device testing 2026-08-06): once the Safari grid fix made cards honestly phone-sized, the pair tiles' artwork left too little room — titles ellipsized ("Active Me…"). Art yields; words win. */ @media (max-width: 540px) { .card-spot-art svg { width: 72px; } .card-spot-art--sm { display: none; } /* Banner text: two tidy wrapped lines instead of one hard-truncated one. */ .priority-banner-body p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 4-up tool tiles: cap descriptions at 3 lines so tiles stay compact. */ .health-tool-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } .card--hero { padding: var(--sp-4) var(--sp-5); } .card--hero h2 { font-size: 1.02rem; } .faq-card { padding: 4px 15px; } .faq-item { padding: 12px 0; border-bottom: 1px solid var(--grid); } .faq-item:last-child { border-bottom: none; } .faq-item summary { cursor: pointer; font-weight: 650; font-size: .92rem; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--accent); } .faq-item[open] summary::after { content: '−'; } .faq-item p { margin-top: 8px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); min-width: 0; } .stat-tile .v { font-size: 1.35rem; font-weight: 740; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .stat-tile .k { font-size: .72rem; color: var(--muted); margin-top: 3px; line-height: 1.25; } /* buttons */ button, .btn { font: inherit; border: none; cursor: pointer; background: none; color: inherit; -webkit-tap-highlight-color: transparent; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 46px; padding: 12px 14px; border-radius: 12px; font-weight: 660; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px rgba(0, 184, 224, .28); transition: opacity .12s ease, transform .12s ease; } a.btn { text-decoration: none; box-sizing: border-box; } .btn:active { opacity: .92; transform: scale(.98); } .btn.secondary { background: var(--surface-2); color: var(--ink); box-shadow: none; border: 1px solid var(--border); } .btn.ghost { background: transparent; color: var(--ink-2); box-shadow: none; min-height: 40px; } .btn.danger { background: transparent; color: var(--danger); box-shadow: none; } .btn.sm { width: auto; min-height: 34px; padding: 6px 11px; font-size: .82rem; border-radius: 9px; } .btn.sm.primary-quiet { background: var(--accent-soft); color: var(--accent-quiet-ink); box-shadow: none; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); font-weight: 700; } .btn-row { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .btn-row.row { flex-direction: row; } .btn-row.row .btn { flex: 1; } /* Was var(--accent) (cyan) — too close in lightness to the new lighter-blue card background to read as a link. Underline carries the "this is tappable" affordance instead of relying on a color contrast that only worked against the old white cards. */ .linklike { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 650; font-size: .88rem; padding: 4px 0; } /* forms — same rounded field chrome for all text-like inputs */ input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="password"], textarea, select, .profile-input { width: 100%; font: inherit; padding: 11px 12px; min-height: 44px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink); box-sizing: border-box; -webkit-appearance: none; appearance: none; } /* Keep native file picker usable */ input[type="file"] { width: 100%; font: inherit; padding: 10px 0; color: var(--ink); } textarea { min-height: 88px; resize: vertical; } input:focus, textarea:focus, select:focus, .profile-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); } .field { display: block; margin-bottom: 12px; } .field > span { display: block; font-size: .78rem; font-weight: 650; color: var(--ink-2); margin-bottom: 5px; } /* My info — identical stacked fields */ .profile-form .field { margin-bottom: 14px; } .profile-form .profile-input { background: var(--surface-2); border-radius: 12px; } /* gates / flags */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: .7rem; font-weight: 720; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; } .pill.good { background: var(--good-soft); color: var(--good); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--danger-soft); color: var(--danger); } .pill.accent { background: var(--accent-soft); color: var(--accent); } .tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } /* lists */ .list-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--grid); } .list-item:last-child { border-bottom: none; padding-bottom: 0; } .list-item:first-child { padding-top: 0; } .list-item .title { font-weight: 650; letter-spacing: -.01em; } .list-item .meta { font-size: .8rem; color: var(--muted); margin-top: 2px; } .avatar { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-weight: 750; font-size: .85rem; background: var(--accent-soft); color: var(--accent); } .avatar.sm { width: 32px; height: 32px; border-radius: 9px; font-size: .75rem; } /* attention / alert rows — always-light component (see the .attn reset further down that pins its text dark); the gradient used to fade into var(--surface), which was a safe near-white in the old light theme but is the dark card color now, so pin the fade target to a fixed light color too instead of a token that follows the theme. */ .attn { border-left: 3px solid var(--warn); background: linear-gradient(90deg, var(--warn-soft), var(--island-bg) 40%); } .attn.msg { border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--island-bg) 40%); } /* progress */ .bar { height: 7px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 6px; } .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--good) 70%, var(--accent))); border-radius: 99px; } .bar.good i { background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 75%, var(--accent))); } .bar.warn i { background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 60%, var(--island-warn))); } .bar.split { display: flex; } .bar.split i { border-radius: 0; flex-shrink: 0; } .bar.split i.good { background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 75%, var(--accent))); } .bar.split i.warn { background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 60%, var(--island-warn))); } .bar-meta { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; } /* lab table */ table.data { width: 100%; border-collapse: collapse; font-size: .85rem; } table.data th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--grid); } table.data td { padding: 9px 6px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; vertical-align: middle; } .flag-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--good); } .flag-dot.low, .flag-dot.high, .flag-dot.bad { background: var(--danger); } .flag-dot.warn, .flag-dot.high-normal, .flag-dot.low-normal { background: var(--warn); } /* results overview — light lab summary card, matches the rest of the app (patient labs) */ .results-overview { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 18px; padding: 20px 18px 22px; margin-bottom: 12px; box-shadow: var(--shadow); } .ro-eyebrow { font-size: .78rem; font-weight: 700; color: var(--muted); } .ro-date { font-size: .74rem; color: var(--muted); margin-top: 2px; } .ro-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: 16px 0 12px; color: var(--ink); } .ro-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; } .ro-legend-item { font-size: .8rem; font-weight: 650; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; } .ro-legend-item.down { color: var(--muted); } .ro-cat { font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 18px 0 6px; } .ro-cat:first-of-type { margin-top: 0; } .ro-row { padding: 9px 0; border-bottom: 1px solid var(--grid); } .ro-row:last-child { border-bottom: none; } .ro-row-top { display: flex; align-items: baseline; gap: 8px; } .ro-trend { font-size: .68rem; color: var(--muted); flex-shrink: 0; width: 12px; } .ro-trend.up { color: var(--accent); } .ro-trend.warn { color: var(--warn); } .ro-name { font-weight: 680; font-size: .88rem; color: var(--ink); } .ro-value { font-size: .85rem; color: var(--ink); margin-left: 2px; white-space: nowrap; } .ro-unit { font-size: .74rem; color: var(--muted); } .ro-info { position: relative; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; color: var(--muted); cursor: help; } .ro-info svg { width: 14px; height: 14px; display: block; } .ro-info:hover, .ro-info:focus-visible { color: var(--accent); outline: none; } .ro-info .ro-tip { position: absolute; left: 0; top: calc(100% + 7px); z-index: 5; width: 236px; max-width: min(236px, 78vw); padding: 9px 11px; border-radius: 10px; background: var(--island-bg); color: var(--island-ink); font-size: .76rem; font-weight: 500; line-height: 1.42; box-shadow: var(--shadow); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .12s ease, transform .12s ease; } .ro-info:hover .ro-tip, .ro-info:focus-visible .ro-tip { opacity: 1; transform: none; pointer-events: auto; } .ro-pill { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; } .ro-pill.bad, .ro-pill.warn { color: var(--accent); } .ro-bar { position: relative; height: 4px; border-radius: 99px; background: var(--grid); margin: 8px 0 0 20px; } .ro-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 99px; background: var(--border-strong); } .ro-bar-fill.flag { background: var(--accent); } .ro-bar-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); transform: translate(-50%, -50%); z-index: 1; } .ro-range-meta { font-size: .72rem; color: var(--muted); margin: 5px 0 0 20px; } /* login / gate */ .gate-screen { min-height: calc(100dvh - 40px); display: flex; flex-direction: column; justify-content: center; padding: 24px 4px 40px; max-width: 480px; margin: 0 auto; } .gate-screen .mark, .gate-screen .mark-relive { display: none; } .gate-logo { display: block; height: 52px; width: auto; max-width: min(280px, 86vw); object-fit: contain; object-position: left center; margin-bottom: 20px; } .gate-logo-icon { display: block; width: 56px; height: 56px; object-fit: contain; margin-bottom: 18px; } .gate-logo-wrap { display: inline-block; width: fit-content; } @media (prefers-reduced-motion: no-preference) { .gate-logo, .gate-logo-icon { animation: gate-logo-in .6s var(--ease-spring) both; } @keyframes gate-logo-in { from { opacity: 0; transform: translateY(-6px) scale(.9); } to { opacity: 1; transform: none; } } } .gate-relive h1 { font-size: 1.85rem; letter-spacing: -.04em; line-height: 1.12; color: var(--ink); } .eyebrow { font-size: .72rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .brand-relive { display: inline-flex; align-items: center; gap: 10px; } .brand-logo { height: 28px; width: auto; max-width: 140px; object-fit: contain; display: block; } .brand-logo-icon { width: 28px; height: 28px; object-fit: contain; display: block; } .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: none; place-items: center; font-size: .8rem; font-weight: 820; } .app-shell, .shell-main, main { background: var(--plane); } header.top { background: var(--topbar-veil); } .role-cards { display: grid; gap: 10px; margin: 22px 0 10px; } .role-card { text-align: left; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; transition: border-color .12s, transform .12s; } .role-card:hover { border-color: var(--accent); transform: translateY(-1px); } .role-card b { display: block; font-size: 1rem; margin-bottom: 4px; } .role-card span { color: var(--ink-2); font-size: .86rem; } .patient-pick { display: grid; gap: 8px; margin-top: 12px; } .patient-pick button { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .patient-pick button:hover { border-color: var(--accent); } /* chart */ .chart-wrap svg { width: 100%; height: auto; display: block; } .chart-wrap .tick { font-size: 10px; fill: var(--muted); } /* layout helpers */ .grid-2 { display: grid; gap: 12px; } @media (min-width: 800px) { .grid-2 { grid-template-columns: 1fr 1fr; } main { padding: 20px 28px 40px; } .desktop-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: start; } } .split-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; } /* Lab Biomarkers' collapsed-card header link ("View Labs") — at narrow widths the flex row was shrinking it below its two-word min-content width, wrapping it into "View" / "Labs" stacked on two lines instead of staying a normal single-line label. */ .labcard-collapsed .split-head .linklike { white-space: nowrap; flex-shrink: 0; } .back-row { margin-bottom: 8px; } .spacer { height: 10px; } .footer-note { text-align: center; font-size: .75rem; color: var(--muted); margin-top: 16px; } /* empty */ .empty { text-align: center; padding: 28px 16px; color: var(--muted); border: 1px dashed var(--grid); border-radius: var(--radius); background: var(--surface); } /* Compact single-line empty state for dashboard sections — avoids stacking a full .card's padding on top of .empty-soft's own padding for what's just one muted line of text. */ .empty-row { padding: 14px 16px; color: var(--muted); font-size: .88rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .tab-badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 800; line-height: 16px; text-align: center; } /* Geometry (padding / radius / size / weight / nowrap) is shared with .role-pill above so the pills in the header row are visually identical in shape. Only colour differs here. */ .header-badge { cursor: pointer; font-family: inherit; background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); transition: opacity .12s ease; } .header-badge:active { opacity: .9; } /* toast */ #toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px); max-width: 420px; width: calc(100% - 32px); background: var(--island-bg); color: var(--island-ink); border-radius: 12px; padding: 12px 14px; font-size: .9rem; font-weight: 620; opacity: 0; pointer-events: none; transition: .22s; z-index: 60; box-shadow: var(--shadow); } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (min-width: 861px) { #toast { left: calc(50% + var(--sidebar-w) / 2); } } /* centered popup — same on mobile and desktop, not anchored to an edge */ .sheet-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; } .sheet { width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; background: var(--surface); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); animation: sheet-in .18s ease; border: 1px solid var(--border); } .sheet.wide { max-width: 640px; } @keyframes sheet-in { from { transform: translateY(12px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } } .sheet h2 { margin-bottom: 12px; } /* Per-medication detail — a bottom-sheet shape (slides up from the bottom edge), unlike .sheet-backdrop/.sheet's centered modal box. Half-height (40-50vh), not near-fullscreen — the Active Medication card itself now pushes a full page (goPush() in app.js) rather than expanding into a sheet; this component only handles one medication's detail, opened from that page's rxCard() rows (see medicationDetailSheet() in app.js). The handle/header are the only drag-to-dismiss targets — .med-expand-body scrolls normally and never drives the drag. */ .med-expand-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 50; display: flex; align-items: flex-end; justify-content: center; } .med-expand-sheet { /* Fits its content (prescriber row through Request refill) instead of a fixed 46vh, so typical medications don't get an internal scrollbar; still capped so a medication with unusually long notes doesn't push the sheet off-screen. */ width: 100%; max-width: 720px; height: auto; max-height: 80vh; max-height: 80dvh; min-height: 200px; display: flex; flex-direction: column; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow); border: 1px solid var(--border); border-bottom: none; padding-bottom: env(safe-area-inset-bottom); overflow: hidden; animation: med-sheet-in .3s cubic-bezier(.2, .7, .3, 1) both; /* Drag-to-dismiss rubber-band snap-back only — suppressed (style.transition='none') while actively dragging so the panel tracks the finger 1:1, restored on release. */ transition: transform .22s ease; } @keyframes med-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } .med-expand-handle { flex: none; display: flex; justify-content: center; padding: 10px 0 6px; touch-action: none; cursor: grab; } .med-expand-handle i { display: block; width: 36px; height: 4px; border-radius: 99px; background: var(--border-strong); } .med-expand-header { flex: none; padding: 2px 18px 12px; touch-action: none; } .med-expand-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 18px; -webkit-overflow-scrolling: touch; } /* Desktop (sidebar layout, same 861px switch as the bottom nav): the bottom-sheet shape is a phone idiom — render the same markup as a centered modal instead. Drag-to-dismiss is also disabled at this width in bindMedExpandDrag() (app.js). */ @media (min-width: 861px) { .med-expand-backdrop { align-items: center; padding: 16px; } .med-expand-sheet { max-width: 640px; border-radius: 16px; border-bottom: 1px solid var(--border); padding-bottom: 0; animation: sheet-in .18s ease; } .med-expand-handle { display: none; } .med-expand-header { touch-action: auto; } } .more-menu-list { display: flex; flex-direction: column; } .more-menu-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 4px; border-bottom: 1px solid var(--grid); background: transparent; color: var(--ink); font: inherit; font-size: .95rem; font-weight: 600; } .more-menu-row:last-child { border-bottom: none; } .more-menu-row .tab-icon { width: 22px; display: inline-flex; justify-content: center; color: var(--ink-2); flex-shrink: 0; } .more-menu-row .tab-icon svg { width: 19px; height: 19px; } .more-menu-label { flex: 1; } .more-menu-row .tab-badge { position: static; margin-left: 0; min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; font-size: .68rem; background: var(--danger); box-shadow: none; } .check-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--grid); } .check-row.done .title { color: var(--muted); } .approve-btn { width: auto; min-width: 96px; flex-shrink: 0; background: var(--good); box-shadow: 0 4px 12px rgba(13, 159, 110, 0.28); transition: opacity .12s ease; } .approve-btn:active { opacity: 0.9; } .action-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .action-cta .btn.sm { min-width: 72px; } /* ---------- Labs upload / morning review / compare ---------- */ .lab-morning-card { padding: 12px 0; border-bottom: 1px solid var(--grid); } .lab-morning-card:last-child { border-bottom: none; padding-bottom: 0; } .lab-morning-card:first-child { padding-top: 0; } .lab-morning-card.pending { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; background: color-mix(in srgb, var(--warn-soft) 55%, transparent); border-bottom-color: transparent; } .lab-morning { border-left: 3px solid var(--warn); margin-bottom: 12px; } .lab-morning.pending { background: linear-gradient(90deg, var(--warn-soft), var(--island-bg) 50%); } .lab-note { margin-top: 8px; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); font-size: .86rem; color: var(--ink-2); line-height: 1.4; } .lab-note.provider { background: var(--accent-soft); color: var(--ink); } .suggest-list { margin: 0; padding-left: 18px; font-size: .86rem; color: var(--ink-2); } .suggest-list li { margin-bottom: 6px; } .lab-draw-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .lab-draw-chip { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; } .lab-draw-chip .d { font-weight: 700; font-size: .85rem; min-width: 4.5rem; } .lab-draw-chip .n { font-size: .88rem; color: var(--ink-2); } .lab-draw-chip.on { border-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--island-bg) 55%); } .lab-draw-chip.pending { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); } .lab-marker-grid { display: flex; flex-direction: column; gap: 8px; } .lab-marker-row { display: grid; grid-template-columns: 1.4fr .8fr .7fr .6fr .6fr; gap: 6px; } .lab-marker-row input { min-height: 40px; padding: 8px; font-size: .82rem; } table.lab-compare td.up { color: var(--good); font-weight: 700; } table.lab-compare td.down { color: var(--danger); font-weight: 700; } .hint { font-size: .8rem; color: var(--muted); margin: -6px 0 14px; } .tiny { font-size: .72rem; } .doc-row .doc-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; font-size: 1rem; } .doc-row .cta { flex-wrap: wrap; justify-content: flex-end; max-width: 46%; } .doc-row .cta .btn, .doc-row .cta a.btn { text-decoration: none; } /* ===== Patients list (simple) ===== */ .roster-toolbar { margin: 12px 0 14px; display: flex; flex-direction: column; gap: 10px; } .roster-toolbar input[type="search"] { max-width: 420px; width: 100%; } .roster-filters { display: flex; flex-wrap: wrap; gap: 6px; } .filter-chip { border: 1px solid var(--border); background: var(--island-bg); color: var(--ink-2); font: inherit; font-size: .76rem; font-weight: 650; padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .filter-chip:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--ink); } .filter-chip.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent-quiet-ink); } .patient-list { display: flex; flex-direction: column; gap: 0; padding: 4px 8px !important; } .patient-list-row { display: grid; grid-template-columns: auto 1.35fr 1.2fr 0.75fr 0.75fr auto; gap: 14px 16px; align-items: center; width: 100%; text-align: left; border: none; background: transparent; border-bottom: 1px solid var(--grid); padding: 14px 10px; border-radius: 10px; font: inherit; color: inherit; transition: background .12s; } .patient-list-row:last-child { border-bottom: none; } .patient-list-row:hover { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); } .pl-main { min-width: 0; } .pl-name { font-weight: 720; font-size: 1rem; letter-spacing: -.02em; margin-bottom: 3px; } .pl-contact { font-size: .84rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 6px; } .pl-contact .dot { color: var(--muted); } .pl-meta { font-size: .9rem; font-weight: 550; min-width: 0; } .pl-pathway .pathway-chip-wrap { margin-top: 2px; } .pl-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; } .pl-cta { flex-shrink: 0; } .pathway-chip-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pathway-chip { display: inline-block; max-width: 100%; font-size: .82rem; font-weight: 650; color: var(--ink); line-height: 1.25; } .phase-pill { font-size: .72rem !important; letter-spacing: .02em; } .allergy-flag { display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border)); border-radius: 6px; padding: 1px 6px; vertical-align: middle; } .docs-flag { display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border)); border-radius: 6px; padding: 1px 6px; vertical-align: middle; } /* Pathway required docs checklist */ .doc-check-list { display: flex; flex-direction: column; gap: 8px; } .doc-check-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--grid); background: var(--surface); } .doc-check-row.ok { border-color: color-mix(in srgb, var(--good) 30%, var(--border)); background: color-mix(in srgb, var(--good) 8%, var(--island-bg)); } .doc-check-row.miss { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, var(--island-bg)); } .doc-check-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; } .doc-check-row.ok .doc-check-icon { background: color-mix(in srgb, var(--good) 22%, var(--island-bg)); color: var(--good); } .doc-check-row.miss .doc-check-icon { background: color-mix(in srgb, var(--warn) 28%, var(--island-bg)); color: var(--island-warn-deep); } .audit-feed { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow: auto; } .audit-row { padding: 8px 0; border-bottom: 1px solid var(--grid); } .audit-row:last-child { border-bottom: none; } .audit-action { font-weight: 680; font-size: .88rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } /* Team queue ownership — card stack, less chrome */ .queue-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--grid); } .queue-list { display: flex; flex-direction: column; gap: 8px; } .queue-card { border: 1px solid var(--grid); border-radius: 11px; padding: 11px 12px; background: var(--island-bg); transition: border-color .12s, box-shadow .12s; } .queue-card:hover { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); box-shadow: 0 2px 10px rgba(42, 63, 82, .04); } .queue-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .queue-card .title { font-weight: 680; font-size: .93rem; letter-spacing: -.015em; color: var(--ink); } .queue-card .meta { font-size: .78rem; color: var(--muted); margin-top: 2px; line-height: 1.35; } .owner-pill { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; } .owner-pill.ma { background: color-mix(in srgb, var(--info) 10%, var(--island-bg)); border-color: color-mix(in srgb, var(--info) 28%, var(--border)); color: var(--info-deep); } .owner-pill.clin { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--accent-quiet-ink); } .owner-pill.open { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 28%, var(--border)); color: var(--warn); } .queue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--grid); } .queue-assign { font: inherit; font-size: .78rem; font-weight: 600; padding: 6px 8px; min-height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); max-width: 148px; cursor: pointer; } .queue-actions .linklike { margin-left: auto; font-size: .8rem; color: var(--muted); font-weight: 650; } .queue-actions .linklike:hover { color: var(--good); } .role-pill.ma { background: color-mix(in srgb, var(--info) 24%, var(--surface-2)); color: var(--info); } @media (max-width: 960px) { .patient-list-row { grid-template-columns: auto 1fr auto; gap: 8px 12px; } .pl-meta:not(.pl-pathway) { display: none; } .pl-pathway { grid-column: 2; grid-row: 2; } .pl-cta { grid-column: 3; grid-row: 1; } } /* Patient chart header — same fields as list */ .patient-info-bar { display: flex; align-items: flex-start; gap: 16px; margin-top: 6px; padding: 12px 14px; background: var(--island-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; } .pib-grid { display: grid; grid-template-columns: 1fr 1.25fr 0.75fr 0.75fr 0.95fr; gap: 16px 20px; flex: 1; min-width: 0; } .pib-pathway .pathway-line { font-size: .88rem; font-weight: 650; } .pib-block { min-width: 0; padding-right: 16px; border-right: 1px solid var(--grid); } .pib-block:last-child { border-right: none; padding-right: 0; } .pib-name .chart-name { font-size: 1.2rem; margin: 0; line-height: 1.25; } .pib-contact-stack { display: flex; flex-direction: column; gap: 6px; } .pib-line { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: baseline; font-size: .88rem; } .pib-k { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .pib-line a { color: var(--accent); text-decoration: none; font-weight: 600; word-break: break-all; } .pib-line a:hover { text-decoration: underline; } .pib-val { font-size: .92rem; font-weight: 600; color: var(--ink); line-height: 1.35; } @media (max-width: 1000px) { .pib-grid { grid-template-columns: 1fr 1fr; } .pib-block { border-right: none; padding-right: 0; padding-bottom: 8px; border-bottom: 1px solid var(--grid); } .pib-block:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; } .chart-topbar { flex-direction: column; } .patient-info-bar { width: 100%; } } /* Gate login (server auth) */ .backend-status { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; } .backend-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .backend-status.online { color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--good) 28%, var(--border)); } .backend-status.offline { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); } .login-card { margin-top: 18px; text-align: left; max-width: 400px; padding: 16px 16px 14px !important; border-radius: 14px; box-shadow: var(--shadow); } .login-card h2 { font-size: .95rem !important; letter-spacing: -.01em; } .login-error { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border)); border-radius: 10px; padding: 8px 10px; font-size: .84rem; font-weight: 600; margin-bottom: 10px; } .gate-screen .role-cards { margin-top: 14px; } .gate-screen .role-card { text-align: left; border-radius: 12px; padding: 12px 14px; box-shadow: none; } .gate-screen .patient-pick button { border-radius: 11px; } .footer-note code { font-size: .8em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; } /* Password strength + security */ .pw-strength { margin-top: 8px; font-size: .8rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); } .pw-strength.ok { color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--surface-2)); } .pw-strength.fair { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface-2)); } .pw-strength.weak { color: var(--danger); background: var(--danger-soft); } .session-list { list-style: none; padding: 0; margin: 0; } .session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .session-row.current { background: color-mix(in srgb, var(--accent, #2a6) 6%, transparent); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; } .perm-list { font-size: .82rem; margin: 8px 0 0; padding-left: 1.1rem; max-height: 180px; overflow: auto; } .perm-list code { font-size: .78em; } .mfa-secret { display: inline-block; font-size: 1rem; letter-spacing: .06em; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; user-select: all; } .backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; list-style: none; padding: 0; margin: 10px 0; } .backup-codes code { font-size: .9rem; } .security-page .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 800px) { .security-page .grid-2 { grid-template-columns: 1fr; } } .clinic-switch { font-size: .78rem; font-weight: 600; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); max-width: 180px; /* Shares the header flex row with the pills — don't let it be squeezed either */ flex: 0 0 auto; } .access-log { margin: 10px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); } .access-log ul { margin: 6px 0 0; padding-left: 1.1rem; font-size: .8rem; } .users-table .row-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .users-table select { font-size: .8rem; max-width: 140px; } .header-badge.warn { background: color-mix(in srgb, var(--warn) 18%, var(--surface-2)); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border)); font-weight: 700; } /* —— Patient Health Record (clean profile) —— */ /* Widened modestly (was 1040) so the clinical content isn't crammed into the left half of a desktop viewport. Deliberately not full-bleed — long rows get harder to scan. */ .phr-shell { max-width: 1140px; } .phr-hero { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; } .phr-hero-main { display: flex; gap: 14px; align-items: flex-start; flex: 1; min-width: 240px; } .phr-hero-name { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .phr-hero-sub { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .92rem; } .phr-hero-meta { margin: 6px 0 0; line-height: 1.4; } .phr-dot { opacity: .45; margin: 0 2px; } .phr-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .phr-tabs { margin: 12px 0 16px; } .phr-page.phr-clean { display: flex; flex-direction: column; gap: 16px; } .phr-card { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .phr-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .phr-card-head h2 { margin: 0; font-size: 1rem; font-weight: 700; } .phr-hint { font-size: .78rem; color: var(--muted, #777); font-weight: 500; } .phr-chart-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; } .phr-span-2 { grid-column: span 2; } .phr-span-full { grid-column: 1 / -1; } .phr-bp-pair { display: flex; align-items: center; gap: 6px; } .phr-bp-pair input { min-width: 0; } @media (max-width: 800px) { .phr-chart-grid { grid-template-columns: 1fr 1fr; } .phr-span-2, .phr-span-full { grid-column: 1 / -1; } } .phr-chart-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .phr-status-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2, #f6f7f9); } .phr-status-score { font-size: 1.25rem; font-weight: 800; min-width: 48px; text-align: center; line-height: 1.1; } .phr-status-score small { display: block; font-size: .62rem; font-weight: 600; opacity: .65; text-transform: uppercase; letter-spacing: .04em; } .phr-status-score.good { color: var(--good); } .phr-status-score.warn { color: var(--warn); } .phr-status-score.bad { color: var(--danger, #b00); } .phr-status-copy { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; } .phr-jump { display: flex; flex-wrap: wrap; gap: 6px; } .phr-jump-link { font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: inherit; text-decoration: none; } .phr-jump-link:hover { border-color: color-mix(in srgb, var(--accent, #2a6) 40%, var(--border)); } .phr-section { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; } .phr-section-title { margin: 0 0 12px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #666); } .phr-section-title .muted { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; } .phr-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .phr-section-title-row .phr-section-title { margin: 0; } .phr-glance-panel { /* sits above charting so provider sees current state first */ } .phr-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } /* 12 columns so a primary (8) + supporting (4) pair tiles EXACTLY, every row. The previous 6-column grid mixed span-2 and span-3 tiles, which cannot tile evenly — a wide plus two normals is 7 into 6 — so rows wrapped raggedly and left a dead gap. */ .phr-glance-rich { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; /* Cards size to their content instead of stretching to the tallest in the row. Columns still align, but a one-line card no longer gets padded out to match a tall neighbour. */ align-items: start; } .phr-glance-rich .phr-glance-tile { grid-column: span 4; } .phr-glance-rich .phr-glance-main { grid-column: span 8; } .phr-glance-rich .phr-glance-side { grid-column: span 4; } /* Legacy alias — kept so any other caller degrades to the primary width, not a quarter */ .phr-glance-rich .phr-glance-wide { grid-column: span 8; } /* Spans the row. Used by Key biomarkers so monitoring gets the full width. */ .phr-glance-rich .phr-glance-full { grid-column: 1 / -1; } @media (max-width: 900px) { .phr-glance { grid-template-columns: 1fr 1fr; } .phr-glance-rich { grid-template-columns: 1fr; } .phr-glance-rich .phr-glance-tile, .phr-glance-rich .phr-glance-main, .phr-glance-rich .phr-glance-side, .phr-glance-rich .phr-glance-wide, .phr-glance-rich .phr-glance-full { grid-column: 1 / -1; } } .phr-glance-tile { padding: 12px 14px; border-radius: 12px; background: var(--surface-2, #f6f7f9); border: 1px solid transparent; display: flex; flex-direction: column; gap: 6px; min-height: 100px; } .phr-glance-tile.warn { background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)); border-color: color-mix(in srgb, var(--danger) 26%, var(--border)); } /* Allergy alert lives INSIDE the alerts card rather than colouring the whole card, so a real allergy stays unmissable (P0 safety item) without spending a large panel on one line — and so "no known drug allergies" can read as reassurance instead of a warning. */ .phr-alert-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)); border-left: 3px solid var(--danger); font-size: .86rem; } .phr-alert-strip b { color: var(--danger, #b00); font-weight: 750; text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; } /* "No drug allergies documented" is reassurance, not an alert. It was the loudest object in the card, out-shouting a grade-4 symptom. Now a muted one-liner at the foot of the card. */ .phr-alert-clear { font-size: .8rem; color: var(--muted, #777); padding-top: 2px; } .phr-alert-clear b { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2, #5a6270); } /* Symptom rows carry the clinical weight in this card, so give them structure and let severity read at a glance. */ .phr-sym-list { list-style: none; margin: 0; padding: 0; } .phr-sym-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .9rem; } .phr-sym-list li:last-child { border-bottom: 0; } .phr-sym-grade { flex: 0 0 auto; font-size: .74rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface, #fff); color: var(--ink-2, #5a6270); border: 1px solid var(--border); white-space: nowrap; } .phr-sym-grade.hot { background: color-mix(in srgb, var(--warn) 18%, var(--surface-2)); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); } /* Abnormal biomarker row: tint the row and pill the status, so the one result that needs attention is obvious without making the whole panel look alarming. */ .phr-bio-list li.is-abnormal { background: color-mix(in srgb, var(--danger, #b00) 5%, transparent); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; } .phr-bio-status { flex: 0 0 auto; min-width: 76px; text-align: right; font-size: .74rem; font-weight: 700; white-space: nowrap; color: var(--muted); } .phr-bio-status.warn { color: var(--warn, #c45c00); } .phr-bio-status.bad { color: var(--danger, #b00); } /* A pill reads as a deliberate status; bare lowercase "high" read like a stray word. */ .phr-bio-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--surface, #fff); border: 1px solid currentColor; line-height: 1.35; } .phr-k { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; /* Was --muted, which read as faint against the tinted card. Secondary, not washed out. */ color: var(--ink-2, #5a6270); } .phr-glance-tile b { font-size: .98rem; font-weight: 650; line-height: 1.35; } .phr-glance-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .phr-glance-list li { font-size: .9rem; font-weight: 600; line-height: 1.35; padding: 2px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .phr-glance-list li:last-child { border-bottom: 0; } .phr-vitals-stack { display: flex; flex-direction: column; gap: 6px; } /* Fixed label / value / unit columns. Previously flex with content-width labels, so the gap between label and number shifted per row and the numbers never lined up. */ .phr-vital-row { display: grid; grid-template-columns: 4.6rem auto 1fr; align-items: baseline; gap: 8px; font-size: .95rem; } .phr-vital-row em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--ink-2, #5a6270); text-transform: uppercase; letter-spacing: .02em; } .phr-vital-row b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .phr-vital-row .muted { font-size: .8rem; } .phr-bio-compact li { padding: 3px 0; } .phr-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .phr-vitals-inline { display: flex; flex-wrap: wrap; gap: 8px 12px; font-weight: 650; font-size: .92rem; } .phr-vitals-inline em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--muted); margin-right: 3px; } .phr-split { display: grid; grid-template-columns: 1.35fr .9fr; gap: 14px; align-items: start; } @media (max-width: 900px) { .phr-split { grid-template-columns: 1fr; } } .phr-col { display: flex; flex-direction: column; gap: 12px; } .phr-section-grow { min-height: 280px; } .phr-timeline { list-style: none; margin: 0; padding: 0; } .phr-tl-item { display: flex; gap: 12px; padding: 0 0 14px; } .phr-tl-item:last-child { padding-bottom: 0; } .phr-tl-rail { width: 3px; border-radius: 3px; background: var(--border); flex-shrink: 0; margin-top: 4px; min-height: 100%; align-self: stretch; } .phr-tl-rail[data-sec="vitals"] { background: var(--rail-vitals); } .phr-tl-rail[data-sec="symptoms"] { background: var(--rail-symptoms); } .phr-tl-rail[data-sec="progress"], .phr-tl-rail[data-sec="visit"], .phr-tl-rail[data-sec="plan"] { background: var(--rail-progress); } .phr-tl-rail[data-sec="protocol"] { background: var(--rail-protocol); } .phr-tl-rail[data-sec="lab_review"] { background: var(--rail-lab); } .phr-tl-content { flex: 1; min-width: 0; } .phr-tl-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .75rem; margin-bottom: 3px; align-items: center; } .phr-tag { font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent, #0d6b3c); } .phr-tl-title { font-weight: 650; font-size: .92rem; } .phr-tl-body { margin-top: 3px; font-size: .88rem; color: var(--text-muted, #555); white-space: pre-wrap; line-height: 1.45; } .phr-empty { margin: 0; font-size: .88rem; color: var(--muted, #777); } .phr-kv { display: flex; flex-direction: column; gap: 10px; font-size: .88rem; } .phr-kv p { margin: 3px 0 0; line-height: 1.4; color: var(--text, #222); } .phr-bio-list { list-style: none; margin: 0; padding: 0; } .phr-bio-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .86rem; } .phr-bio-list li:last-child { border-bottom: 0; } .phr-bio-list i { font-style: normal; font-weight: 500; color: var(--muted); font-size: .78rem; } /* Third column: abnormal status + draw date. Fixed width so the values stay aligned in a scannable column instead of shifting with each label's length. */ .phr-bio-meta { flex: 0 0 auto; min-width: 108px; text-align: right; font-size: .74rem; font-weight: 600; color: var(--muted); white-space: nowrap; } .phr-bio-meta.warn { color: var(--warn); } .phr-bio-meta.bad { color: var(--danger, #b00); } /* Value column pushes right, meta sits after it */ .phr-bio-list li > span:first-child { flex: 1 1 auto; min-width: 0; } .phr-bio-list li > b { flex: 0 0 auto; text-align: right; } .phr-goal-row, .phr-file-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .86rem; } .phr-goal-row:last-child, .phr-file-row:last-child { border-bottom: 0; } .phr-prep-list { margin: 8px 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--muted, #555); } /* Demo PHI honesty banner — quieter */ .demo-phi-banner { position: sticky; top: 0; z-index: 50; background: var(--relive-slate); color: rgba(255,255,255,.88); font-size: .74rem; line-height: 1.35; padding: 6px 16px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); } .demo-phi-banner strong { color: #fff; font-weight: 720; margin-right: 4px; } body.has-demo-banner .app-shell { /* banner is outside shell; no extra offset needed with sticky body flow */ } /* Membership + Salesforce — single compact bar */ .commercial-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; padding: 9px 14px; background: var(--island-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; } .commercial-strip .commercial-bits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1; min-width: 0; font-size: .82rem; color: var(--ink-2); } .commercial-strip .commercial-bits b { color: var(--ink); font-weight: 680; } .commercial-pkg { font-size: .82rem; font-weight: 600; color: var(--ink-2); } .commercial-sfid { font-size: .78rem; font-weight: 600; word-break: break-all; } .mono-soft { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .76rem; color: var(--ink-2); } .membership-pill { font-size: .68rem !important; } .pl-member-row { margin-top: 6px; } .commercial-cta { margin-left: auto; } .sf-link { white-space: nowrap; } .plan-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .plan-draft-hint { margin: 0 0 10px; } /* Chart safety strip — calm clinical strip */ .safety-strip { display: grid; grid-template-columns: 1.2fr 1fr 1.15fr .95fr; gap: 0; margin: 8px 0 10px; padding: 0; background: var(--island-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; overflow: hidden; } .safety-pathway, .safety-cell { min-width: 0; padding: 12px 14px; } .safety-cell { border-left: 1px solid var(--grid); } .safety-pathway-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; } .safety-pathway-name { font-weight: 700; font-size: .9rem; letter-spacing: -.01em; line-height: 1.3; } .safety-phase-set { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; max-width: 160px; } .safety-phase-set .pl-label { font-size: .62rem; } .safety-phase-set select { font: inherit; font-size: .8rem; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); min-height: 32px; } .safety-cell.alert { background: color-mix(in srgb, var(--danger) 7%, var(--island-bg)); border-left: 3px solid var(--danger); } .safety-val { font-size: .84rem; font-weight: 600; line-height: 1.4; color: var(--ink); margin-top: 2px; } .safety-val.alert-text { color: var(--danger); font-weight: 720; } @media (max-width: 900px) { .safety-strip { grid-template-columns: 1fr; } .safety-cell { border-left: none; border-top: 1px solid var(--grid); } .safety-cell.alert { border-left: none; border-top: 3px solid var(--danger); } .commercial-cta { margin-left: 0; } } /* ---------- HumanOS target · provider workbench ---------- */ .chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .path-chip, .stat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .75rem; font-weight: 680; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); } .stat-chip b { color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; } .stat-chip.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); } .stat-chip.warn b { color: var(--warn); } .stat-chip.bad { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); } .stat-chip.bad b { color: var(--danger); } .stat-chip.good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); color: var(--good); } .stat-chip.good b { color: var(--good); } .attn-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } /* Always-light component (.attn-row is in the always-light reset further down, which pins its text dark) — every background here used to fade into/equal var(--surface), safe when that was near-white but wrong now that it's the dark card color, so pin to a fixed light color. */ .attn-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--island-bg); border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; transition: border-color .12s, transform .12s; } .attn-row:hover { border-color: var(--accent); } .attn-row:active { transform: scale(.997); } .attn-row.crit { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: linear-gradient(90deg, var(--danger-soft), var(--island-bg) 55%); } .attn-row.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: linear-gradient(90deg, var(--warn-soft), var(--island-bg) 55%); } .attn-row.msg { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: linear-gradient(90deg, var(--accent-soft), var(--island-bg) 55%); } .attn-row .attn-body { min-width: 0; } .attn-row .attn-body .title { font-weight: 700; letter-spacing: -.01em; } .attn-row .attn-body .meta { font-size: .8rem; color: var(--muted); margin-top: 2px; } .attn-row .attn-cta { display: flex; gap: 6px; flex-shrink: 0; } .queue-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 4px; } @media (max-width: 700px) { .queue-row { grid-template-columns: repeat(2, 1fr); } } .queue-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 13px; box-shadow: var(--shadow); min-width: 0; } .queue-tile .n { font-size: 1.45rem; font-weight: 760; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .queue-tile .t { font-size: .72rem; color: var(--muted); margin-top: 2px; line-height: 1.25; } .queue-tile.hot { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .queue-tile.hot .n { color: var(--accent); } /* ===== Patient What’s next (Phase 2) ===== */ .pat-whats-next { padding: 16px 16px 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: var(--radius); box-shadow: var(--shadow); } .pat-whats-next-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pat-whats-next-meta { font-size: .92rem; font-weight: 600; color: var(--ink); line-height: 1.35; margin-top: 2px; } .pat-whats-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pat-whats-next-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--grid); border-radius: 10px; } .pat-whats-next-n { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 750; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .pat-whats-next-text { font-size: .9rem; font-weight: 550; line-height: 1.4; color: var(--ink); } .pat-whats-next-item.kind-ok .pat-whats-next-text { color: var(--ink-2); font-weight: 500; } .pat-next-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn-soft) 55%, var(--island-bg)); border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--border)); } .pat-next-between.soft { background: var(--surface-2, var(--surface)); border-color: var(--grid); } .pat-next-between-text { font-size: .9rem; font-weight: 650; margin-top: 2px; } .pat-whats-next-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grid); } @media (max-width: 560px) { .pat-whats-next-item { grid-template-columns: auto 1fr; } .pat-whats-next-item .btn { grid-column: 2; justify-self: start; } .pat-next-between { flex-direction: column; align-items: stretch; } } /* ===== Care Brief (provider prep + draft assist) ===== */ .care-brief-panel .care-brief-name { font-size: 1.05rem; font-weight: 720; letter-spacing: -.02em; margin-bottom: 4px; } .care-brief-meta { margin-bottom: 6px; line-height: 1.35; } .care-brief-section { margin-top: 12px; } .care-brief-list { margin: 6px 0 0; padding-left: 1.15rem; font-size: .9rem; line-height: 1.45; color: var(--ink); } .care-brief-list.numbered { padding-left: 1.2rem; } .care-brief-list li { margin-bottom: 4px; } .care-brief-delta { margin-top: 10px; line-height: 1.35; } .care-brief-hint { margin-top: 10px; font-style: italic; } .care-brief-actions { margin-top: 14px; } .care-ready-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 11px 14px; background: var(--island-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; } .care-ready-strip.expanded { align-items: flex-start; } .care-ready-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; flex: 1; min-width: 0; } .care-ready-label { font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); flex-shrink: 0; } .care-ready-bits { font-size: .88rem; font-weight: 550; color: var(--ink-2); line-height: 1.4; } .care-ready-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; } .care-ready-expand { flex: 1 1 100%; border-top: 1px solid var(--grid); margin-top: 4px; padding-top: 12px; } /* ===== Patient chart (horizontal, calm) ===== */ .chart-page { max-width: 1100px; } .chart-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .back-link { border: none; background: none; color: var(--accent); font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; padding: 0; margin-bottom: 8px; } .chart-name-row { display: flex; align-items: center; gap: 12px; } .chart-avatar { width: 48px; height: 48px; border-radius: 14px; font-size: 1rem; } .chart-name { font-size: 1.35rem; margin: 0; letter-spacing: -.03em; } .chart-meta { color: var(--muted); font-size: .88rem; margin-top: 2px; } .chart-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .chart-statstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; } @media (max-width: 900px) { .chart-statstrip { grid-template-columns: repeat(2, 1fr); } } .chart-statstrip .cstat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; } .chart-statstrip .cstat.wide { grid-column: span 1; } @media (min-width: 901px) { .chart-statstrip .cstat.wide { grid-column: span 1; } } .chart-statstrip .cl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; } .chart-statstrip .cv { font-size: 1.15rem; font-weight: 740; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .chart-statstrip .cv.warn { color: var(--warn); } .chart-statstrip .cv.small-text { font-size: .88rem; font-weight: 650; line-height: 1.3; } .chart-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .chart-tabs button { border: none; background: none; font: inherit; font-size: .88rem; font-weight: 650; color: var(--muted); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .chart-tabs button:hover { color: var(--ink); } .chart-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); } .chart-body { min-width: 0; } .chart-overview { display: flex; flex-direction: column; gap: 14px; } .chart-hrow { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 860px) { .chart-hrow { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .chart-hrow { grid-template-columns: 1fr 1.1fr .9fr; } } /* Patient check-in */ .card.checkin-cta.due { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: linear-gradient(135deg, var(--warn-soft), var(--island-bg) 55%); } .card.checkin-form .field { margin-bottom: 12px; } .plan-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 800px) { .plan-grid { grid-template-columns: 1.2fr .9fr; align-items: start; } } .plan-note-field textarea { min-height: 110px; } .plan-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; } .due-inline { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 650; color: var(--ink-2); } .due-inline input { width: 52px; min-height: 36px; padding: 6px 8px; } .check-inline { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-2); font-weight: 550; } .check-inline input { width: auto; min-height: auto; } .preset-select { width: auto; min-height: 32px; padding: 4px 8px; font-size: .8rem; border-radius: 8px; max-width: 200px; } .lab-hstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 700px) { .lab-hstrip { grid-template-columns: 1fr; } } .lab-hcell { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; min-width: 0; } .lab-hcell .lh-name { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; } .lab-hcell .lh-val { font-size: 1.15rem; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .lab-hcell .lh-val span { font-size: .75rem; font-weight: 550; color: var(--muted); } .lab-hcell .lh-val.warn { color: var(--warn); } .lab-hcell .lh-val.bad { color: var(--danger); } .lab-hcell .lh-flag { font-size: .72rem; color: var(--muted); margin: 2px 0 6px; } /* Clinical snapshot — stacked vertically (provider chart) */ .snapshot-h { display: flex; flex-direction: column; gap: 0; } .snapshot-h > div { padding: 12px 0; border-bottom: 1px solid var(--grid); } .snapshot-h > div:first-child { padding-top: 0; } .snapshot-h > div:last-child { border-bottom: none; padding-bottom: 0; } .snapshot-h .cl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; } .snapshot-h .cv-text { font-size: .9rem; font-weight: 550; color: var(--ink); line-height: 1.4; } .workbench-kv { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--grid); font-size: .86rem; } .workbench-kv:last-child { border-bottom: none; } .workbench-kv .k { color: var(--muted); } .workbench-kv .v { font-weight: 650; text-align: right; } .spark { height: 28px; display: flex; align-items: flex-end; gap: 2px; margin: 4px 0 0; } .spark i { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-deep))); opacity: .88; } .spark i.hot { background: linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 50%, var(--island-warn-deep))); } .spark i.bad { background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 50%, var(--island-danger))); } .plan-inline textarea { font-size: .9rem; } .sheet .section-label { margin-top: 14px; } .action-stack .field { margin-bottom: 8px; } /* ===== Care · reminders · recommendations · refills ===== */ .pat-hero { margin-bottom: 18px; position: relative; } /* Notifications bell + sheet (the patient-facing surface for db.notifications) */ .notif-bell { position: absolute; top: 0; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, background .15s ease; } .notif-bell:hover { border-color: var(--border-strong); } .notif-bell-icon { width: 20px; height: 20px; display: block; line-height: 0; } .notif-bell-icon svg { width: 20px; height: 20px; display: block; } .notif-dot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; border: 2px solid var(--surface); } /* Sheet header: title + count chip left, quiet mark-all + circular close right. Symmetric vertical padding so the row sits evenly centered in the header band. */ .med-expand-header.notif-header { padding: 16px 18px; border-bottom: 1px solid var(--border); } .notif-head { display: flex; align-items: center; gap: 10px; } .notif-head h2 { margin: 0; font-size: 1.25rem; font-weight: 750; letter-spacing: -0.01em; line-height: 1.2; } .notif-count { font-size: 12px; font-weight: 700; line-height: 1; color: var(--danger); background: var(--danger-soft); border-radius: 999px; padding: 5px 10px; flex: none; } .notif-head-spacer { flex: 1; } .notif-markall { border: 0; background: none; color: var(--accent); font: inherit; font-size: .85rem; font-weight: 680; cursor: pointer; padding: 7px 10px; border-radius: 9px; flex: none; transition: background .15s ease; } .notif-markall:hover { background: var(--surface-2); } .notif-close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; transition: color .15s ease; } .notif-close:hover { color: var(--ink); } .notif-close svg { width: 16px; height: 16px; display: block; } .notif-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; color: var(--ink); font: inherit; } .notif-row:last-child { border-bottom: 0; } .notif-row-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: transparent; flex: none; } .notif-row.unread .notif-row-dot { background: var(--danger); } .notif-row.unread .title { font-weight: 680; } .notif-row-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .notif-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .notif-row-top .title { line-height: 1.35; } .notif-row-time { font-size: 12px; color: var(--ink-2); flex: none; white-space: nowrap; } .notif-row-msg { line-height: 1.45; } /* Shown only on pages reached via App.goPush() (this._navBack set) — reverses the push transition via goPop(), same as swiping in from the left edge. */ .pat-hero h1 { font-size: 1.65rem; letter-spacing: -.04em; } .profile-hero { display: flex; align-items: center; gap: var(--sp-3); } .profile-monogram { width: 48px; height: 48px; font-size: 1rem; } /* ---------- First-run tutorial overlay (patient side only, shown once) ---------- */ .tutorial-overlay { display: flex; flex-direction: column; min-height: calc(100vh - 100px); padding: var(--sp-2) 0 var(--sp-4); } .tutorial-stage { flex: 1; display: flex; align-items: center; justify-content: center; touch-action: pan-y; cursor: grab; } .tutorial-card { max-width: 360px; text-align: center; padding: var(--sp-5); } .tutorial-card[hidden] { display: none; } .tutorial-icon { width: 72px; height: 72px; margin: 0 auto var(--sp-5); border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .tutorial-icon svg { width: 34px; height: 34px; } .tutorial-card h1 { font-size: 1.35rem; letter-spacing: -.03em; margin-bottom: var(--sp-2); } .tutorial-card .sub { color: var(--ink-2); } .tutorial-dots { display: flex; justify-content: center; gap: 8px; margin: var(--sp-5) 0 var(--sp-4); } .tutorial-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background .18s ease, transform .18s ease; } .tutorial-dot.active { background: var(--accent); transform: scale(1.3); } .modern-card { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } .reminder-stack { display: flex; flex-direction: column; gap: 8px; } .reminder-card { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--grid); } /* Clean appointment reminder row */ .appt-reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px 14px 0; border-bottom: 1px solid var(--grid); background: transparent; border-radius: 0; border-left: none; border-right: none; border-top: none; } .appt-reminder-row:last-child { border-bottom: none; padding-bottom: 4px; } .appt-reminder-row:first-child { padding-top: 4px; } .appt-reminder-main { flex: 1; min-width: 0; } .appt-reminder-type { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.3; } .appt-reminder-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; font-size: .86rem; color: var(--ink-2); font-weight: 550; line-height: 1.35; } .appt-meta-item { white-space: nowrap; } .appt-meta-dot { color: var(--muted); user-select: none; } .reminder-prep { margin-top: 6px; color: var(--ink-2); line-height: 1.35; } .rec-list, .refill-list { display: flex; flex-direction: column; gap: 10px; } .rec-card, .refill-card { padding: 14px; border-radius: 12px; border: 1px solid var(--grid); background: var(--surface-2); transition: border-color .15s ease, background .15s ease, opacity .15s ease; } .rec-card.status-pending { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); background: linear-gradient(120deg, var(--accent-soft), var(--island-bg) 60%); } .rec-card.status-approved { border-color: color-mix(in srgb, var(--good) 30%, var(--border)); } .rec-card.status-denied { border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); opacity: .92; } .rec-top, .refill-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .rec-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .refill-card.urgent, .refillcard.urgent { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: linear-gradient(120deg, var(--warn-soft), var(--surface) 55%); } .refill-card.overdue, .refillcard.overdue { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: linear-gradient(120deg, var(--danger-soft), var(--surface) 55%); } .refill-cta { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grid); } .refill-cta p { margin-bottom: 8px; color: var(--ink-2); } .care-tab { display: flex; flex-direction: column; gap: 14px; } .empty-soft { padding: 14px; color: var(--muted); font-size: .9rem; text-align: center; } .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 640px) { .stat-row { grid-template-columns: repeat(4, 1fr); } } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 12px; box-shadow: var(--shadow); text-align: center; } .stat-tile .v { font-size: 1.35rem; font-weight: 760; letter-spacing: -.03em; color: var(--accent); } .stat-tile .k { font-size: .72rem; font-weight: 600; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; } /* Owner-dashboard KPI rows hold 4–6 tiles, and .stat-row's fixed 4-up left the 5th and 6th stranded on a second row. auto-fit keeps whatever the count is on one line when it fits and splits it evenly when it doesn't. */ .admin-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } /* Trend chip under a KPI. Rendered only when there's a real prior period to compare against — "no baseline" and "flat" are different states and must not both read as 0%. */ .admin-trend { margin-top: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .01em; } .admin-trend.up { color: var(--good); } .admin-trend.down { color: var(--danger); } .admin-trend.flat { color: var(--muted); font-weight: 600; } .admin-trend-chart { min-height: 160px; } /* ===== Patient eRx · billing · profile ===== */ .demo-banner { padding: 12px 14px; margin-bottom: 16px; border-radius: 12px; /* Always-light component (see the .demo-banner reset further down) — fade target must stay a fixed light color, not var(--surface), which now resolves to the dark card color. */ background: color-mix(in srgb, var(--warn-soft) 70%, var(--island-bg)); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); font-size: .86rem; line-height: 1.4; color: var(--ink-2); } .demo-banner strong { color: var(--warn); } .erx-list { display: flex; flex-direction: column; gap: 12px; } .erx-card { padding: 14px; border-radius: 12px; border: 1px solid var(--grid); background: var(--surface-2); } .erx-card-tap { display: block; width: 100%; text-align: left; position: relative; padding-right: 36px; cursor: pointer; transition: border-color .12s, background .12s; } .erx-card-tap:hover { border-color: var(--accent); background: var(--surface-2); } .erx-card-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--muted); } .erx-top { display: flex; align-items: center; justify-content: flex-start; gap: 6px; flex-wrap: wrap; } .erx-meta-grid, .erx-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; font-size: .9rem; font-weight: 550; } .erx-prescriber-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .pay-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--grid); } .pay-card:last-child { border-bottom: none; padding-bottom: 0; } .pay-card:first-child { padding-top: 0; } .pay-card.default { background: linear-gradient(100deg, var(--accent-soft), transparent 70%); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 12px; border-bottom-color: transparent; } .pay-brand { font-weight: 720; font-size: 1rem; letter-spacing: -.02em; } .danger-text { color: var(--danger) !important; } .check-inline { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-2); cursor: pointer; } .check-inline input { width: auto; min-height: auto; } @media (max-width: 560px) { .erx-meta-grid, .erx-detail-grid { grid-template-columns: 1fr; } .pay-card { flex-direction: column; align-items: flex-start; } } /* ===== Patient request refill ===== */ .refill-request-panel .refill-policy { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); font-size: .9rem; line-height: 1.45; color: var(--ink-2); } .refill-request-panel .refill-policy p { margin: 0 0 8px; } .refill-request-panel .refill-policy p:last-of-type { margin-bottom: 0; } .refill-order-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--grid); } .refill-order-row:last-child { border-bottom: none; } .refill-order-row .body { min-width: 0; flex: 1; } .refill-req-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--grid); background: var(--surface); margin-bottom: 8px; transition: border-color .15s ease, background .15s ease; } .refill-req-card.pending { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: linear-gradient(100deg, var(--warn-soft), var(--surface) 60%); } /* Staff flagged this request as needing a patient step (action_required) */ .refill-action-block { margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); background: linear-gradient(100deg, var(--danger-soft), var(--surface) 60%); } @media (max-width: 560px) { .refill-order-row { flex-direction: column; align-items: stretch; } .refill-order-row .cta { align-self: flex-start; } } /* ===== Form / letter requests ===== */ .form-req-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--grid); background: var(--surface); margin-bottom: 10px; } .form-req-card.status-pending { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: linear-gradient(100deg, var(--warn-soft), var(--surface) 65%); } .form-req-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } /* Patient form type picker */ .form-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; } @media (max-width: 640px) { .form-type-grid { grid-template-columns: 1fr; } } .form-type-card { text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; transition: border-color .12s, box-shadow .12s; font: inherit; color: inherit; width: 100%; display: block; pointer-events: auto; -webkit-tap-highlight-color: transparent; } .form-type-card .title, .form-type-card .meta { pointer-events: none; } .form-type-card:hover { border-color: var(--accent); } .form-type-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .form-type-card .title { font-weight: 700; font-size: .95rem; margin-bottom: 4px; color: var(--ink); } .form-type-card .meta { font-size: .82rem; color: var(--ink-2); line-height: 1.35; } .form-request-promo { border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); background: linear-gradient(115deg, var(--accent-soft), var(--surface) 55%); } /* Dashboard tasks & reminders */ .task-add { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--grid); } .task-row, .reminder-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 12px; padding: 12px 0; border-bottom: 1px solid var(--grid); } .task-row:last-child, .reminder-row:last-child { border-bottom: none; } .task-row .body, .reminder-row .body { flex: 1; min-width: 0; } .task-row .cta, .reminder-row .cta { display: flex; flex-wrap: wrap; gap: 6px; } .task-row.overdue .title { color: var(--danger); } .reminder-row.soon { background: linear-gradient(90deg, var(--warn-soft), transparent 70%); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; } .reminder-row.past .meta { color: var(--danger); font-weight: 650; } /* Compact morning lab review on dashboard */ .lab-review-mini .panel-head { padding: 10px 14px; } .lab-review-mini .panel-head h2 { font-size: .92rem; margin: 0; } .lab-review-mini-body { padding: 4px 10px 8px !important; max-height: 220px; overflow-y: auto; } .lab-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--grid); } .lab-mini-row:last-child { border-bottom: none; } .lab-mini-row .body { min-width: 0; flex: 1; } .lab-mini-row .title { font-size: .9rem; font-weight: 680; letter-spacing: -.01em; } .lab-mini-row .meta { font-size: .78rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lab-mini-row .cta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .lab-mini-row.pending { background: linear-gradient(90deg, var(--warn-soft), transparent 70%); margin: 0 -4px; padding-left: 8px; padding-right: 4px; border-radius: 8px; } .upload-or { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; color: var(--muted); font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; } .upload-or::before, .upload-or::after { content: ''; flex: 1; height: 1px; background: var(--grid); } /* Patient blood work results list */ .blood-work-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; padding: var(--sp-4) 0; border-bottom: 1px solid var(--grid); } .blood-work-row:last-child { border-bottom: none; } .blood-work-row.on { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; } .blood-work-row .body { min-width: 0; flex: 1; } .blood-work-row .title { font-weight: 680; font-size: .95rem; } .blood-work-row .meta { margin-top: 4px; font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .blood-work-date { flex-shrink: 0; text-align: right; min-width: 7.5rem; padding: 0 4px; } .blood-work-date-label { display: block; font-size: .65rem; font-weight: 720; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; } .blood-work-date-val { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; } .blood-work-row .btn { flex-shrink: 0; } @media (max-width: 560px) { .blood-work-row { flex-wrap: wrap; } .blood-work-date { order: 2; text-align: left; min-width: 0; width: 100%; padding: 0; } .blood-work-row .btn { order: 3; } } /* Appointment confirm / reschedule — minimal actions far right */ .reminder-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; margin-left: auto; } .appt-mini-btn { min-height: 30px !important; padding: 4px 10px !important; font-size: .78rem !important; font-weight: 650 !important; width: auto !important; border: 1px solid var(--border) !important; border-radius: 8px !important; color: var(--ink-2) !important; background: transparent !important; box-shadow: none !important; } .appt-mini-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-soft) !important; } .appt-reminder-row.confirmed .appt-reminder-type { color: var(--ink); } /* Appointments dashboard card — single next-appointment hero + inline-expanding history + Schedule CTA, replacing the old separate "Upcoming Appointments"/"Book an appointment" cards. */ .appt-hero { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; padding: 10px 0 12px; cursor: pointer; } .appt-hero-main { flex: 1; min-width: 0; } .appt-hero-date { font-size: 1.15rem; font-weight: 720; letter-spacing: -.01em; } .appt-hero-time { font-size: .92rem; font-weight: 650; color: var(--accent); margin-top: 2px; } .appt-hero-chevron { font-size: 1.3rem; color: var(--muted); flex-shrink: 0; } .appt-hero-provider { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .appt-hero-provider-name { font-weight: 620; font-size: .9rem; } .appt-hero-meta { font-size: .82rem; color: var(--muted); margin-top: 4px; } .appt-history-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; border-top: 1px solid var(--grid); padding: 10px 0; margin-top: 4px; font-weight: 620; font-size: .88rem; color: var(--ink); cursor: pointer; } .appt-history-chevron { font-size: 1.2rem; color: var(--muted); flex-shrink: 0; } .appt-history-item { width: 100%; background: none; border: none; text-align: left; font: inherit; cursor: pointer; } .reschedule-phone-card { text-align: center; padding: 22px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); } .reschedule-phone-lead { font-size: .95rem; color: var(--ink-2); margin: 0 0 12px; line-height: 1.4; } .reschedule-phone-num { display: block; font-size: 1.45rem; font-weight: 760; letter-spacing: -.02em; color: var(--accent); text-decoration: none; } .reschedule-phone-num:hover { text-decoration: underline; } @media (max-width: 560px) { .appt-reminder-row { flex-wrap: wrap; } .reminder-actions { width: 100%; } .appt-reminder-meta { gap: 4px 6px; } } /* print — "Download PDF" on a lab result: print only that card, hide app chrome */ @media print { .sidebar, .top, #toast, .no-print { display: none !important; } .shell-main { max-height: none !important; overflow: visible !important; } main { padding: 0 !important; overflow: visible !important; } body:has(#lab-print-area) main > *:not(#lab-print-area) { display: none !important; } /* Lab detail now opens as a sheet (outside
) rather than inline — print only the sheet. */ body:has(#lab-print-area) .sheet-backdrop:not(:has(#lab-print-area)) { display: none !important; } .sheet-backdrop:has(#lab-print-area) { position: static !important; background: none !important; display: block !important; padding: 0 !important; } #lab-print-area { position: static !important; max-height: none !important; max-width: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; animation: none !important; } .results-overview { box-shadow: none !important; border: none !important; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } /* ============================================================ Relive gradient theme is the base theme now (see :root) — cards, panels, inputs etc. all pick up --surface/--ink/--border directly since they're already built on those tokens. This block used to re-declare the same values as a targeted override when the base theme was light; now it only needs the pieces that are genuinely *distinct* from the base card/input treatment. ============================================================ */ .msg-row.mine .msg-bubble { background: var(--accent); color: var(--accent-ink); } /* Nested light chip that intentionally stays light-on-light (Healthcare Plan popup's provider-note callout) — pin its own text dark and make its wash opaque (not the translucent accent-soft mix, which reveals the dark gradient card behind it and collapses contrast toward one edge) so it reads consistently. */ .lab-note.provider { background: var(--accent-wash); color: var(--accent-quiet-ink); } /* These "island" rows always render on their own --island-bg background regardless of whatever card wraps them — re-scope the semantic tokens to the island family here so nothing inherits the ink meant for the plane/cards. Which components are islands is layout; what the island palette looks like is the scheme's call (--island-* in each scheme block up top). */ .attn, .attn-row, .queue-card, .lab-morning.pending, .lab-draw-chip.on, .pat-next-between, .card.checkin-cta.due, .rec-card.status-pending, .demo-banner, .panel-head, .day-pulse, .alert-row, .filter-chip, .patient-info-bar, .commercial-strip, .safety-strip, .care-ready-strip, .doc-check-row, .ro-tip, #toast { --ink: var(--island-ink); --ink-2: var(--island-ink-2); --muted: var(--island-muted); --grid: var(--island-grid); --border: var(--island-border); --border-strong: var(--island-border-strong); --surface-2: var(--island-surface-2); --good: var(--island-good); --warn: var(--island-warn); --danger: var(--island-danger); color: var(--ink); } /* Patient-side refill panel: keep its header on the dark theme instead of the always-light .panel-head treatment above (that one's calibrated for the provider dashboard's queue panels, not touched this round). */ .refill-request-panel.panel > .panel-head { --ink: #ffffff; --ink-2: #dbe9f0; --muted: #a8c4d3; background: transparent; border-bottom-color: rgba(255, 255, 255, 0.14); color: var(--ink); } /* ---------- Dashboard cards — collapsed row + chevron; tapping any of them pushes a full page (App.goPush() in app.js) instead of expanding in place. Six card families share this layout language via combined selectors below. */ .idcard, .scorecard, .plancard, .medcard, .refillcard, .labcard { margin-bottom: var(--sp-2); } .idcard-collapsed, .scorecard-collapsed, .plancard-collapsed, .medcard-collapsed, .refillcard-collapsed { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; position: relative; padding-top: 12px; padding-bottom: 12px; padding-right: 36px; cursor: pointer; } /* Lab Biomarkers' collapsed card has its own internal split-head + kpi-row (not the single-row name+chevron layout the reset above assumes), so it just needs plain button-chrome removal. */ .labcard-collapsed { display: block; width: 100%; text-align: left; cursor: pointer; } /* Patient ID card — the one card that represents the patient's own identity, so it gets its own surface treatment instead of sharing the flat utility-card look with Health Score/Plan/Meds/ Refills. Gradient + monogram use existing tokens only; content (name, member-since) unchanged. */ .idcard.idcard-collapsed { background: linear-gradient(120deg, var(--hero-from) 0%, var(--surface) 65%, var(--accent-soft) 130%); border-color: var(--border-strong); gap: var(--sp-3); transition: border-color .12s, transform .18s var(--ease-spring), box-shadow .18s ease; } .idcard.idcard-collapsed:active { transform: scale(.97); box-shadow: 0 2px 10px rgba(15, 30, 42, .22); } .idcard-id-row { display: flex; align-items: center; gap: var(--sp-3); } .idcard-monogram { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 780; font-size: .92rem; letter-spacing: -.02em; box-shadow: 0 4px 12px rgba(0, 184, 224, .32); } .idcard-monogram svg { width: 20px; height: 20px; } .idcard-name { font-size: 1.05rem; font-weight: 720; letter-spacing: -.01em; } .idcard-name-row { display: flex; align-items: center; gap: 7px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status-dot.good { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); } .status-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); } .status-dot.bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .status-dot.accent { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .icon-badge { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(0, 184, 224, .32); } .icon-badge svg { width: 20px; height: 20px; } .icon-badge.warn { background: var(--warn); box-shadow: 0 4px 12px rgba(251, 191, 36, .32); } .icon-badge.bad { background: var(--danger); box-shadow: 0 4px 12px rgba(248, 113, 113, .32); } .icon-badge.good { background: var(--good); box-shadow: 0 4px 12px rgba(52, 199, 123, .32); } .icon-badge.info { background: var(--info); box-shadow: 0 4px 12px rgba(99, 102, 241, .32); } /* Health Tools — dashboard launcher grid (Toby's 2026-08-06 dashboard spec). 2-up on phones, 4-up once the row fits, mirroring the mockup's single row on wide screens. Tiles are real cards (not medcard rows) because their content stacks vertically: icon, title, description, corner chevron. */ .health-tools { grid-column: 1 / -1; } .health-tools-head { display: flex; align-items: baseline; justify-content: space-between; } .health-tools-head .section-label { margin: 0 0 0 2px; } /* All four tiles side by side in one row on every viewport (Toby 2026-08-06, matching the dashboard mockup): compact stacked tiles — icon top, title, small description. */ .health-tools-grid { display: grid; /* minmax(0,1fr), not bare 1fr: 1fr's min-content floor let one long word ("Reconstitution.") force the 4-up row wider than an iPhone screen — the overflow used to pan, now it would clip. Columns must always split evenly. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: var(--sp-2); min-width: 0; } .health-tool-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; padding: 12px 10px 24px; min-width: 0; } .health-tool-tile .icon-badge { width: 32px; height: 32px; flex-shrink: 0; } .health-tool-tile .icon-badge svg { width: 16px; height: 16px; } .health-tool-body { min-width: 0; } /* Fixed px on purpose (Toby 2026-08-06): tile text keeps one size and format at every viewport width — no responsive overrides, no rem scaling, no mobile text inflation. */ .health-tool-title { font-size: 13px; font-weight: 680; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; } .health-tool-desc { line-height: 1.35; margin-top: 3px; font-size: 11px; overflow-wrap: break-word; hyphens: auto; } .health-tool-tile, .health-tool-tile * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .health-tool-tile .idcard-chevron { top: auto; bottom: 6px; transform: none; right: 10px; } @media (min-width: 720px) { .health-tools-grid { gap: var(--sp-2); } .health-tool-tile { padding: 14px 14px 26px; } } /* View-all rows — same row anatomy as healthReminderRow, but the whole row is the button. */ .health-tool-row { display: flex; align-items: center; gap: 10px; width: 100%; position: relative; background: none; border: 0; cursor: pointer; padding-right: 30px; font: inherit; color: inherit; } .health-tool-coming { text-align: center; padding: var(--sp-6) var(--sp-4); } .health-tool-coming .icon-badge { margin: 0 auto; } /* Peptide Calculator flow (2026-08-06 mockup) — step pages, result, tabbed plan. */ /* Spacing rhythm (2026-08-06 polish pass): one scale for the whole flow — 20px card padding, 16px between blocks (step head → fields → helper card), 10-12px between repeated rows. Scoped under .pep-page so the rest of the app's tighter card rhythm is untouched. */ .pep-page .card.modern-card { padding: 20px 18px; } .pep-page .pep-step-head { margin-bottom: 16px; } .pep-page .field { margin-bottom: 16px; } .pep-page .section-label { margin-bottom: 4px; } .pep-page .pill.warn { display: block; white-space: normal; line-height: 1.45; height: auto; } /* Header variant: back arrow left, title truly centered (replaces the standard left title). */ .pep-nav-back { background: none; border: none; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--ink); padding: 0 8px 2px 0; } header.top .page-title.pep-nav-title { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; } .pep-nav-spacer { width: 30px; flex-shrink: 0; } /* Full-height pages: each step stretches to the viewport (header + main padding + bottom bar accounted for per breakpoint) so the card and its CTA fill the screen like the mockup. */ .pep-page { display: flex; flex-direction: column; min-height: calc(100dvh - 196px); } @media (min-width: 861px) { .pep-page { min-height: calc(100dvh - 140px); } } .pep-fill { flex: 1; display: flex; flex-direction: column; } .pep-fill .pep-cta { margin-top: auto; padding-top: 14px; } .pep-fill .pep-cta + .linklike { flex-shrink: 0; } /* Vertical distribution (2026-08-06 "fill the screen" pass) — same designs, the free space just spreads BETWEEN blocks instead of pooling below them. .pep-spread: even gaps between sibling cards/rows in a filled wrapper. .pep-airy: form cards — space-between from step head to CTA. .inj-distribute: content cards — labels/rows/art share the height evenly. */ .pep-spread { justify-content: space-evenly; } .pep-spread > .pep-cta, .pep-airy > .pep-cta { margin-top: 16px; } .pep-airy { justify-content: space-between; } .inj-distribute { justify-content: space-evenly; } .pep-grow { flex: 1; } .card.pep-fill > .inj-step-row, .card.pep-fill > .pep-how-row, .card.pep-fill > .inj-menu-row, .pep-plan-body > .card:first-child > .pep-how-row { flex: 1 1 0; align-items: center; } .inj-site-grid.pep-grow { grid-auto-rows: 1fr; margin-bottom: var(--sp-2); } .card.pep-fill .inj-site-big { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; margin: 4px auto; } .card.pep-fill .inj-site-big svg, .card.pep-fill .inj-site-big .inj-photo { width: 100%; height: auto; } .pep-plan-body > .card:first-child { flex: 1; display: flex; flex-direction: column; } .pep-plan-body > .card:first-child > * { flex-shrink: 0; } .pep-plan-body > .card:first-child > .pep-syringe-diagram { flex-shrink: 1; } .pep-step-head { display: flex; align-items: flex-start; gap: 10px; } .pep-step-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); font-size: .78rem; font-weight: 720; } .pep-step-num.quiet { background: var(--accent-soft); color: var(--accent-quiet-ink); } .pep-option { display: flex; align-items: center; gap: 14px; width: 100%; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px; margin-top: 12px; cursor: pointer; } .pep-option.selected { border-color: var(--accent); background: var(--accent-soft); } .pep-option.soon { opacity: .62; cursor: default; } .pep-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 800; } .pep-how-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; } .pep-how-row .pep-step-num { width: 22px; height: 22px; font-size: .72rem; } .pep-med-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface-2); border: 1.5px solid transparent; border-radius: var(--radius); padding: 13px 14px; margin-top: 10px; cursor: pointer; } .pep-med-row.selected { border-color: var(--accent); background: var(--accent-soft); } /* .field > span sets display:block for label captions — out-specify it for the input+unit row */ .field > .pep-input-row, .pep-input-row { display: flex; align-items: stretch; margin-bottom: 0; } .pep-input-row input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .pep-unit { display: inline-flex; align-items: center; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-left: none; border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0; font-size: .8rem; color: var(--muted); white-space: nowrap; } .pep-help-card { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border-radius: var(--radius); padding: 14px; margin-top: 8px; } .pep-cta { width: 100%; margin-top: 16px; } .pep-cta--outline { background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent-deep); box-shadow: none; } .pep-success { text-align: center; font-weight: 680; font-size: .9rem; color: var(--good); background: var(--good-soft); border-radius: var(--radius); padding: 12px; margin: 16px 0 12px; } .pep-big { font-size: 2.3rem; font-weight: 780; letter-spacing: -.02em; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .pep-big--units { font-size: 1.7rem; } .pep-big-unit { font-size: 1rem; font-weight: 650; } .pep-chip-row { display: flex; gap: 12px; margin-top: 18px; } .pep-chip { flex: 1; min-width: 0; background: var(--surface-2); border-radius: var(--radius); padding: 12px; text-align: center; } .pep-chip .title { font-size: .95rem; } .pep-sum-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--grid); } .pep-sum-row:first-of-type { padding-top: 8px; } .pep-sum-row:last-child { border-bottom: none; padding-bottom: 4px; } .pep-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; } .pep-tab { flex-shrink: 0; border: none; cursor: pointer; background: var(--surface-2); color: var(--ink-2); border-radius: 99px; padding: 7px 14px; font-size: .8rem; font-weight: 650; } .pep-tab.active { background: var(--accent); color: var(--accent-ink); } /* Syringe diagram fills the stretched card; the callout labels use percentage `top`s computed from the same PEP_SYR fractions the SVG is drawn with, so alignment holds at any height. The SVG keeps its aspect (height:100%, width:auto) — never constrain its width or the percentage mapping breaks via letterboxing. */ .pep-syringe-diagram { position: relative; display: flex; gap: 16px; margin-top: 16px; /* Definite height on purpose: the SVG's height:100% must resolve against a real number (flex-derived heights leave it indefinite → the SVG falls back to width:100% and blows up). 60dvh ≈ fills the stretched card on phones; clamped for short/tall screens. */ height: clamp(400px, 60dvh, 560px); } .pep-syringe-diagram > svg { height: 100%; width: auto; flex-shrink: 0; } .pep-syr-labels { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-evenly; } .pep-syr-label { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 9px; } .pep-syr-ml { display: block; font-size: .88rem; font-weight: 720; line-height: 1.2; } .pep-syr-units { display: block; margin-top: 1px; } .pep-syr-label.active .pep-syr-units { color: var(--accent-deep); } /* Injection Guide (2026-08-06 mockups) — shares the pep flow primitives (pep-page/fill/cta, pep-step-num) and adds its own rows, segmented control, site grid, calendar and callouts. */ .inj-hero { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .inj-hero-badge { width: 46px; height: 46px; } .inj-menu-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; } .inj-callout { display: flex; align-items: flex-start; gap: 12px; background: var(--accent-soft); border-radius: var(--radius); padding: 14px; margin-top: 10px; } .inj-callout .icon-badge { background: var(--surface); color: var(--accent-deep); } .inj-progress { margin-top: 12px; } .inj-progress-bar { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .inj-progress-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--good) 70%, var(--accent))); } .inj-seg { display: flex; background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 4px; } .inj-seg button { flex: 1; border: none; cursor: pointer; background: transparent; color: var(--ink-2); font: inherit; font-size: .82rem; font-weight: 650; padding: 9px 6px; border-radius: 9px; } .inj-seg button.on { background: var(--accent); color: var(--accent-ink); } .inj-site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; min-width: 0; } .inj-site-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; } .inj-site-card .inj-site-art { width: 100%; } .inj-site-card.selected { border-color: var(--accent); background: var(--accent-soft); } .inj-site-art { display: block; } .inj-site-art svg, .inj-site-art .inj-photo { width: 100%; max-width: 120px; height: auto; margin: 0 auto; display: block; border-radius: 12px; } .inj-photo { object-fit: cover; } .inj-video { position: relative; margin-top: 14px; border-radius: var(--radius); overflow: hidden; background: #f6ddc9; } .inj-video > svg, .inj-video > .inj-photo { display: block; width: 100%; height: 170px; object-fit: cover; object-position: center 35%; } .inj-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; } .inj-video-play svg { width: 52px; height: 52px; filter: drop-shadow(0 2px 8px rgba(15, 30, 42, .35)); } .inj-video-time { position: absolute; right: 10px; bottom: 10px; background: rgba(15, 30, 42, .65); color: #fff; font-size: .72rem; font-weight: 650; padding: 4px 9px; border-radius: 99px; } .inj-step-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--grid); } .inj-step-row:last-of-type { border-bottom: none; } .inj-check-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; } .inj-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--good-soft); color: var(--good); font-size: .7rem; font-weight: 800; } .inj-bullet-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0 6px 4px; } .inj-bullet { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 6px; } .inj-site-big { max-width: 250px; margin: 4px auto 12px; } .inj-site-big svg, .inj-site-big .inj-photo { width: 100%; height: auto; border-radius: 14px; display: block; } .inj-site-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .inj-faq-head { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; } .inj-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .inj-cal-head .linklike { font-size: 1.2rem; padding: 0 8px; } .inj-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; } .inj-cal-wd { font-weight: 650; padding: 4px 0; } .inj-cal-day { position: relative; padding: 7px 0 11px; border-radius: 9px; font-variant-numeric: tabular-nums; color: var(--ink); } .inj-cal-day.today { background: var(--accent); color: var(--accent-ink); font-weight: 720; } .inj-cal-dot { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--good); } .inj-cal-day.today .inj-cal-dot { background: var(--accent-ink); } .inj-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 26px; } .inj-done-art svg { width: 130px; height: auto; } .inj-recap { width: 100%; text-align: left; margin-top: 18px; } .pep-syr-label.active { background: var(--accent-soft); } .pep-syr-label.active .pep-scale-dot { background: var(--accent); } .pep-scale-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; } /* Dynamic Priority Banner — the single highest-priority reminder, tone-accented left border. Compact by design (smaller padding/icon than a full card) and every text node is single-line + ellipsis-truncated so it can't wrap into a tall, ragged block on narrow viewports. */ .priority-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-left: 4px solid var(--accent); } .priority-banner-warn { border-left-color: var(--warn); } .priority-banner-bad { border-left-color: var(--danger); } .priority-banner .icon-badge { width: 32px; height: 32px; } .priority-banner .icon-badge svg { width: 16px; height: 16px; } .priority-banner-body { flex: 1; min-width: 0; } .priority-banner-title { font-size: .92rem; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .priority-banner-body p { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .priority-banner .btn.sm { flex-shrink: 0; } .idcard-tenure { font-size: .8rem; color: var(--muted); margin-top: 2px; } .idcard-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--muted); } /* Any chevron nested inside an action row (ID card's "Manage in My Profile", Healthcare Plan's "Recommendations") sits inline via flex, not absolutely positioned in the corner — that positioning is only for the top-level collapsed-card chevron. */ .idcard-action-row .idcard-chevron { position: static; transform: none; } .idcard-section { margin-top: var(--sp-4); } .idcard-actions { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .idcard-action-row { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); font-weight: 650; cursor: pointer; transition: border-color .12s; } .idcard-action-row:hover { border-color: var(--accent); } /* Health Score card — the dashboard's one hero, everything else stays at the flat utility-card weight. Gradient is the ID card's formula with a different angle/stop so the two "gradient cards" read as siblings, not duplicates. */ .hero-score { background: linear-gradient(135deg, var(--hero-from) 0%, var(--surface) 55%, var(--accent-soft) 130%); border-color: var(--border-strong); gap: var(--sp-3); transition: border-color .12s, transform .18s var(--ease-spring), box-shadow .18s ease; } .hero-score:active { transform: scale(.98); box-shadow: 0 2px 10px rgba(15, 30, 42, .22); } .hero-score-body { display: flex; flex-direction: column; } .hero-score-trend { display: flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 680; margin-top: 6px; } .hero-score-trend.good { color: var(--good); } .hero-score-trend.bad { color: var(--danger); } .score-ring-wrap { position: relative; flex-shrink: 0; width: 76px; height: 76px; } .score-ring-wrap .scorecard-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .score-ring-wrap--lg { width: 132px; height: 132px; } .score-ring-wrap--lg .scorecard-value { font-size: 2.1rem; } .score-ring-wrap--lg .scorecard-value-suffix { font-size: 1rem; } /* Health Score card — big percentage + methodology/driver breakdown on expand. */ .scorecard-value { font-size: 1.3rem; font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .scorecard-value-suffix { font-size: .7rem; font-weight: 650; color: var(--muted); margin-left: 1px; } .scorecard-driver-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); margin-bottom: var(--sp-2); } /* Lab Biomarkers card's marker-detail level — reuses .idcard-chart's sizing under a new name since the chart itself moved here from the retired ID-card marker level. LabChart sizes its own SVG/text inline, so this just reserves layout space before it mounts. */ .labcard-chart { min-height: 220px; } /* Time-range tabs above the zoned marker trend chart (Testosterone Total pilot) — the wearable-app pattern: quiet text buttons in a centered row, active one underlined in ink. */ .trend-tabs { display: flex; justify-content: center; gap: 28px; margin-top: var(--sp-4); } .trend-tab { background: none; border: none; font: inherit; font-size: .88rem; font-weight: 650; color: var(--muted); padding: 4px 2px 8px; cursor: pointer; position: relative; transition: color .15s; } .trend-tab.active { color: var(--ink); } .trend-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--ink); } /* Horizontal scroll shell for the bar trend once draws outgrow the card width — the SVG keeps its natural width and the shell scrolls, parked on the newest draw by chart.js. */ .chart-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* ---------- BrandMark (brand.js) — the only sanctioned logo placements. Sizes are height- driven so full wordmark and icon-only marks align on a shared baseline. */ /* No display override here — context classes (.gate-logo, .brand-logo) set their own display/margins and are defined earlier in the cascade, so the base stays minimal. */ .brand-mark { vertical-align: middle; width: auto; } .brand-mark--sm { height: 18px; } .brand-mark--md { height: 28px; } .brand-mark--lg { height: 44px; } .brand-mark--mono { filter: grayscale(1); opacity: .8; } .brand-watermark { position: absolute; right: 18px; bottom: 14px; height: 64px; opacity: .05; pointer-events: none; } .brand-attrib { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .brand-feature-head { display: flex; align-items: center; gap: 10px; } /* Results-overview rows (.ro-row, defined further up) get an opt-in clickable variant when rendered inside the Lab Biomarkers card's in-place drill-down (resultsOverviewRow's `clickable` param) — same row content, just tappable, unlike the read-only sheet version. */ .ro-row-clickable { cursor: pointer; width: 100%; text-align: left; transition: border-color .12s; } .ro-row-clickable:hover { border-color: var(--accent); } /* Recommendation rows made clickable for the Healthcare Plan card's list level (.rec-card itself is defined further up, shared with the provider-side recommendations UI). */ .rec-card-clickable { display: block; width: 100%; text-align: left; cursor: pointer; } /* iOS-style push/pop page transition (App.goPush/goPop in app.js) — every dashboard card now uses this to reach its detail page/sheet instead of expanding or morphing in place, so no card has its own view-transition-name anymore (see the shared .idcard/.scorecard/etc. block above). Uses the View Transition API's default unnamed "root" group (a whole-page transition), scoped to these two classes (toggled on only for the duration of the transition) rather than applying to every navigation in the app — the plain `nav` action / go() used elsewhere (sidebar clicks, etc.) stays instant on purpose. */ :root.nav-push::view-transition-old(root) { animation: nav-push-out .32s cubic-bezier(.2, .7, .3, 1) both; } :root.nav-push::view-transition-new(root) { animation: nav-push-in .32s cubic-bezier(.2, .7, .3, 1) both; } :root.nav-pop::view-transition-old(root) { animation: nav-pop-out .32s cubic-bezier(.2, .7, .3, 1) both; } :root.nav-pop::view-transition-new(root) { animation: nav-pop-in .32s cubic-bezier(.2, .7, .3, 1) both; } @keyframes nav-push-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes nav-push-out { from { transform: translateX(0); } to { transform: translateX(-25%); } } @keyframes nav-pop-in { from { transform: translateX(-25%); } to { transform: translateX(0); } } @keyframes nav-pop-out { from { transform: translateX(0); } to { transform: translateX(100%); } } /* ============================================================ Appearance picker (theme.js) — segmented control rendered from Theme.schemes; lives in My Profile (patient) and Account security (provider), plus the sidebar-footer quick toggle. ============================================================ */ .appearance-seg { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); } .appearance-seg button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 9px; font: inherit; font-size: .82rem; font-weight: 650; color: var(--ink-2); border: 1px solid transparent; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; } .appearance-seg button:hover { color: var(--ink); } .appearance-seg button.on { background: var(--surface); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 2px var(--accent-soft); } .appearance-seg .seg-icon { display: inline-flex; } .appearance-seg .seg-icon svg { width: 18px; height: 18px; } .sidebar-foot .btn-theme-cycle { margin-bottom: 6px; }