/* WellPlus EMR — WellPlus Medical Group brand (navy #182460 + cyan #3078C0), Apple "Liquid Glass" aesthetic: translucent frosted layers over a brand mesh. */ :root { --navy: #1E2E60; /* sampled from wellplus-logo.png — the one brand navy everywhere */ --navy-2: #2a4f9e; --cyan: #3480C3; /* logo cyan */ --cyan-deep: #2a6cb0; --cyan-text: #2766a8; --brand-grad: linear-gradient(135deg, #182460 0%, #2a4f9e 52%, #3078C0 100%); --navy-grad: linear-gradient(140deg, #314a86 0%, #182460 100%); --accent: #182460; --ink: #19223b; --ink-2: #5b6078; --ink-3: #6b7288; /* darkened from #939bb0 → passes WCAG AA (~4.4:1) for small clinical text */ --gold: #b8860b; --danger: #e5484d; --warn: #d97706; --purple: #7c4dff; --ok: #16a34a; --line: rgba(24, 36, 96, .10); --line-2: rgba(24, 36, 96, .06); --glass: rgba(255, 255, 255, .70); --glass-strong: rgba(255, 255, 255, .84); --glass-soft: rgba(255, 255, 255, .50); --glass-border: rgba(255, 255, 255, .65); --blur: blur(13px) saturate(170%); /* lowered from 22px — big paint-cost cut, still glassy */ --r-card: 18px; --r-ctl: 12px; --shadow: 0 1px 2px rgba(24, 36, 96, .06), 0 10px 28px rgba(24, 36, 96, .07); --shadow-md: 0 6px 20px rgba(24, 36, 96, .10); --shadow-lg: 0 20px 54px rgba(24, 36, 96, .18); --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'SF Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Spacing scale (4px grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; /* Radius scale */ --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* Type scale */ --text-micro: 10px; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 26px; --text-3xl: 32px; /* Motion tokens */ --dur-fast: 120ms; --dur: 180ms; --ease: cubic-bezier(.16, 1, .3, 1); /* Semantic state triads */ --ok-text: #15803d; --ok-bg: rgba(22, 163, 74, .12); --ok-border: rgba(22, 163, 74, .28); --warn-text: #b45309; --warn-bg: rgba(217, 119, 6, .12); --warn-border: rgba(217, 119, 6, .30); --danger-text: #b91c1c; --danger-bg: rgba(229, 72, 77, .12); --danger-border: rgba(229, 72, 77, .30); --info-text: var(--cyan-text); --info-bg: rgba(48, 120, 192, .12); --info-border: rgba(48, 120, 192, .28); --focus-ring: 0 0 0 3px rgba(48, 120, 192, .35); } /* Keyboard focus — this is a keyboard-driven clinical tool and had NO visible focus. */ :where(a, button, [tabindex], input, select, textarea, [role="tab"], [role="button"]):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--r-sm); } :where(a, button, [tabindex]):focus:not(:focus-visible) { outline: none; } /* Respect reduced-motion (mandated by house rules; was missing everywhere). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-height: 100%; } body { font-family: var(--font); color: var(--ink); font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; letter-spacing: -0.011em; background: #eaeef4; } /* The ambient mesh lives on a FIXED, GPU-composited layer instead of background-attachment:fixed on — the latter re-rasterizes the gradient on every scroll frame (the jitter). As its own compositor layer it stays put with zero scroll-time repaint, so the columns scroll glassy-smooth. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 620px at 8% -8%, rgba(48, 120, 192, .20), transparent 56%), radial-gradient(1000px 720px at 108% 4%, rgba(24, 36, 96, .16), transparent 52%), radial-gradient(900px 640px at 50% 120%, rgba(48, 120, 192, .12), transparent 60%); transform: translateZ(0); } /* Buttery scrolling everywhere: every scroll region contains its own momentum so the wheel/trackpad never chains or rubber-bands into a neighbor or the page. */ #view-chart .col, .q-rail, .q-detail, .pl-master, .pl-detail, .hist-form, .alg-form, .assess-pick, .dxs-results, .dx-body, .dx-guard, .dx-companion, .set-table-wrap, .med-hist, .pop, .ta-drop, .modal-card { overscroll-behavior: contain; } button, input, select, textarea { font-family: inherit; } /* the physician's font choice reaches every control, textareas included */ button { cursor: pointer; } a { color: inherit; text-decoration: none; } .hidden { display: none !important; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: rgba(24, 36, 96, .22); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(24, 36, 96, .34); background-clip: content-box; } /* glass mixin helper via class */ .glass { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-border); } /* ===== Top bar (liquid glass) ===== */ .topbar { height: 58px; display: flex; align-items: center; gap: 22px; padding: 0 22px; position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(24, 36, 96, .05), 0 6px 20px rgba(24, 36, 96, .04); } .brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .brand .logo { height: 27px; width: auto; display: block; } .brand .mark { width: 27px; height: 27px; border-radius: 9px; background: var(--brand-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 3px 10px rgba(24, 36, 96, .3); } .brand .pill { font-size: 10px; font-weight: 650; color: var(--cyan-text); background: rgba(48, 120, 192, .16); padding: 3px 8px; border-radius: 8px; letter-spacing: .4px; } .topnav { display: flex; align-items: center; gap: 3px; } .topnav a { font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 8px 13px; border-radius: 10px; transition: all .14s; position: relative; cursor: pointer; } /* Clickable elements that aren't