@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap'); :root { --color-white: #ffffff; --color-off-white: #f0efec; --color-surface: #f7f6f3; --color-tranquil: #c3c4c2; --color-near-black: #1c1c1a; --color-happy: #f8d164; --color-text-primary: #1c1c1a; --color-text-secondary: #6b6b69; --color-text-hint: #9b9b99; --color-text-ghost: #c3c4c2; --border-light: 1px solid rgba(28,28,26,0.08); --border-medium: 1px solid rgba(28,28,26,0.12); --border-strong: 1px solid rgba(28,28,26,0.20); --border-inverse: 1px solid rgba(255,255,255,0.07); --font-sans: 'DM Sans', sans-serif; --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --gutter: 48px; --nav-height: 60px; --max-width: 1400px; --transition-fast: 0.15s ease; /* Status pill + pair border tokens (Brief 3, 2026-04-25). Promoted from patient.html inline styles so designer pages can pick up the same pills in a later cleanup. Contrast verified: draft 9.3:1, prescribed 7.3:1, translate 5.0:1 — all pass WCAG AA at >4.5:1 on white. */ --color-status-draft-bg: #fff7d6; --color-status-draft-fg: #7a4a00; --color-status-prescribed-bg: #ecf6ec; --color-status-prescribed-fg: #2a6b2a; --color-status-translate-bg: #f0efec; --color-status-translate-fg: #5a5a58; --color-pair-border: var(--color-happy); } /* Sort toggle (Brief 3.1) — small inline pair used above scrollable lists (drafts on the patient screen, patient list on the Patients screen). Active option underlined; inactive options dimmed at opacity 0.55. Click to re-render with the new sort key. */ .ps-sort { display: inline-flex; align-items: baseline; gap: 6px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-primary); } .ps-sort__btn { background: none; border: none; padding: 2px 4px; font: inherit; color: var(--color-text-primary); cursor: pointer; opacity: 0.55; } .ps-sort__btn[aria-pressed="true"] { opacity: 1; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .ps-sort__btn:hover { opacity: 1; } /* Patient banner (Brief 3.1) — thin white strip at the top of each designer page identifying the patient and offering a one-click return path to /patient.html?id=. Mounted via ThreeModes.renderPatientBanner({patientId}); designer pages each place a
above the design content. */ .patient-banner { max-width: var(--max-width); margin: 0 auto; width: 100%; box-sizing: border-box; background: var(--color-white); border-bottom: var(--border-light); padding: 10px var(--gutter); display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; } .patient-banner__back { font-size: 11px; font-weight: 400; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-primary); display: inline-flex; align-items: center; gap: 6px; transition: opacity var(--transition-fast); } .patient-banner__back:hover { opacity: 0.6; } .patient-banner__name { font-size: 14px; font-weight: 500; color: var(--color-text-primary); } .patient-banner__ur { font-size: 11px; font-weight: 400; color: var(--color-text-secondary); margin-left: 8px; letter-spacing: 0.04em; } /* Changelog (Brief 3.1) — per-lens edit history rendered by ThreeModes.renderChangelog into a designer-page
block. Compact, monospace-y diffs so "BOZR flat: 7.85 → 7.90" is instantly readable. */ .changelog { margin-top: var(--space-md); } .changelog > summary { cursor: pointer; outline: none; user-select: none; font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-primary); padding: 6px 0; } .changelog-row { border-top: 1px solid rgba(28,28,26,0.08); padding: 8px 0; } .changelog-row__header { display: flex; align-items: baseline; gap: 10px; font-size: 11px; color: var(--color-text-primary); flex-wrap: wrap; } .changelog-row__kind { font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .changelog-row[data-kind="commit"] .changelog-row__kind { color: #2a6b2a; } .changelog-row[data-kind="create"] .changelog-row__kind { color: #7a4a00; } .changelog-row__date { font-variant-numeric: tabular-nums; } .changelog-row__by { color: var(--color-text-secondary); } .changelog-row__diff { margin: 6px 0 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; } .changelog-row__diff code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--color-surface); padding: 1px 4px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--color-text-primary); background: var(--color-tranquil); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ── NAVIGATION ── */ /* `#nav` is the body-root wrapper that nav.js populates. Sticky lives on the wrapper (not the inner .nav) because the wrapper's containing block is the body and spans the whole document height — the inner .nav's containing block would only be the wrapper's own 60 px box, so its sticky un-sticks the moment the user scrolls past the nav's natural position. Pages that use