/* RonanRx — Patient mobile-app dashboard design system Shared, same-origin stylesheet for high-fidelity patient app screens on the hub. Link as /assets/patient-app.css. No JS, no external requests. Tokens are verbatim from DESIGN.md; screens consume classes only and never hardcode hex. Anti-slop honored: no left-border accent cards, no icons-in-colored-circles, no emoji markers, no purple gradient hero. Status is always form + color, never color alone. */ /* ============================================================ Fonts — same-origin woff2 only (CSP font-src 'self') ============================================================ */ @font-face { font-family: "Newsreader"; src: url("/hub/assets/fonts/newsreader.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("/hub/assets/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; } @font-face { font-family: "Geist"; src: url("/hub/assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/hub/assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============================================================ Tokens ============================================================ */ :root { /* Grounds — tinted off-white per DESIGN.md (never pure-white as the canvas) */ --bg-page: #EEEDE6; /* page-outside-the-phone backdrop; cooler so the phone lifts */ --bg-canvas: #FAFAF7; /* the app's own scroll ground */ --bg-surface: #FFFFFF; /* cards */ --bg-sunk: #F3F2EC; /* wells, tracks, sunken rows */ /* Ink ramp */ --ink: #1A1A1A; --ink-2: #4A4A4A; --muted: #8A8A8A; /* Hairlines — biased toward the ink, a chosen neutral not a flat grey */ --hair: color-mix(in srgb, var(--muted) 26%, transparent); --hair-soft: color-mix(in srgb, var(--muted) 14%, transparent); /* Accent — default neutral; body.theme-cool / body.theme-warm override below */ --accent: #0F4C75; /* blue-graphite */ --accent-ink: #0C3A5A; /* accent text on accent-soft grounds */ --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg-surface)); --accent-edge: color-mix(in srgb, var(--accent) 30%, var(--hair)); /* Clinical status palette — verbatim from DESIGN.md */ --st-pending: #6B7280; /* stone */ --st-review: #475569; /* slate */ --st-approved: #0F766E; /* teal */ --st-blocked: #B45309; /* amber */ --st-released: #047857; /* emerald */ --st-shipped: #4338CA; /* indigo */ --st-delivered: #047857; /* emerald — delivery is the released-good terminal state */ --st-except: #BE123C; /* rose */ /* Type roles — same-origin faces */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Geist Mono", "SF Mono", Menlo, monospace; /* Type scale (1.20 minor third off 1rem) */ --t-xs: 0.6875rem; /* 11px labels, micro */ --t-sm: 0.8125rem; /* 13px secondary UI */ --t-md: 0.9375rem; /* 15px body */ --t-lg: 1.125rem; /* 18px card titles */ --t-xl: 1.375rem; /* 22px hero action */ --t-2xl: 1.75rem; /* 28px screen title */ /* Geometry */ --app-w: 430px; --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --pad: 1.125rem; --gap: 0.75rem; /* Elevation — tinted toward the accent, low and clinical */ --shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04); --shadow-app: 0 1px 3px rgba(20, 20, 20, 0.06), 0 24px 60px -30px rgba(15, 76, 117, 0.30); --shadow-pop: 0 8px 24px -10px rgba(20, 20, 20, 0.22); } /* Gender-adaptive accent — set on ; everything else derives from --accent */ body.theme-cool { --accent: #0F4C75; --accent-ink: #0C3A5A; } body.theme-warm { --accent: #8B6F47; --accent-ink: #5A4326; } body.theme-cool, body.theme-warm { --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg-surface)); --accent-edge: color-mix(in srgb, var(--accent) 30%, var(--hair)); } /* ============================================================ Reset / base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--bg-page); color: var(--ink); font-family: var(--font-body); font-size: var(--t-md); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ============================================================ App shell — centered phone column on the page backdrop ============================================================ */ .app { width: 100%; max-width: var(--app-w); margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg-canvas); position: relative; } @media (min-width: 480px) { .app { min-height: min(900px, calc(100dvh - 3rem)); margin: 1.5rem auto; border-radius: 22px; box-shadow: var(--shadow-app); overflow: hidden; /* clip header/tabbar to the rounded device frame */ } } /* --- App header: white-label clinic name + patient greeting --- */ .app-header { flex: none; background: var(--bg-surface); border-bottom: 1px solid var(--hair); padding: 0.9rem var(--pad) 0.8rem; display: flex; align-items: center; gap: 0.75rem; } .app-header .clinic { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .app-header .clinic-name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header .greeting { font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--muted); } .app-header .greeting b { color: var(--ink-2); font-weight: 600; } .app-header .header-spacer { flex: 1; } /* round monogram avatar — a letter, never an icon-in-a-colored-circle */ .app-header .avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); border: 1px solid var(--accent-edge); } /* --- Scrollable content region --- */ .app-main { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--pad); padding-bottom: 5.5rem; /* clear the sticky tab bar */ display: flex; flex-direction: column; gap: var(--gap); } .app-main > .section-label:not(:first-child) { margin-top: 0.6rem; } /* a screen title block at the top of the scroll area */ .screen-head { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.25rem; } .screen-head h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-2xl); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; } .screen-head p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); } /* a small uppercase divider label between module groups */ .section-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--muted); margin: 0; padding-bottom: 0.1rem; } /* --- Sticky bottom tab bar --- */ .tab-bar { flex: none; position: sticky; bottom: 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: color-mix(in srgb, var(--bg-surface) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-top: 1px solid var(--hair); padding: 0.4rem 0.3rem calc(0.4rem + env(safe-area-inset-bottom, 0px)); } .tab { appearance: none; border: 0; background: none; cursor: pointer; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 0.22rem; padding: 0.35rem 0.25rem; border-radius: var(--radius-sm); color: var(--muted); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.01em; } .tab .tab-glyph { width: 22px; height: 22px; display: grid; place-items: center; } .tab .tab-glyph svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; } .tab[aria-current="page"] { color: var(--accent); font-weight: 600; } .tab:hover { color: var(--ink-2); } .tab[aria-current="page"]:hover { color: var(--accent); } /* ============================================================ Cards + grid ============================================================ */ .card { background: var(--bg-surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow-card); } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.7rem; } .card-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); line-height: 1.15; letter-spacing: -0.005em; } .card-label { margin: 0 0 0.55rem; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.11em; font-weight: 600; color: var(--muted); } .card-note { margin: 0.7rem 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); } .card-link { font-size: var(--t-sm); font-weight: 600; color: var(--accent); text-decoration: none; } .card-link:hover { text-decoration: underline; text-underline-offset: 2px; } .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); } .card-grid .span-2 { grid-column: 1 / -1; } @media (max-width: 359px) { .card-grid { grid-template-columns: 1fr; } } /* ============================================================ Hero — "One Thing First" next-action card The one place boldness is spent: serif action line + accent edge. ============================================================ */ .hero { background: var(--bg-surface); border: 1px solid var(--accent-edge); border-radius: var(--radius); padding: 1.1rem 1.15rem 1.2rem; box-shadow: var(--shadow-card); position: relative; } .hero-eyebrow { margin: 0 0 0.4rem; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.11em; font-weight: 600; color: var(--accent); } .hero-action { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 500; font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); } .hero-meta { margin-top: 0.95rem; padding-top: 0.85rem; border-top: 1px solid var(--hair-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; font-size: var(--t-sm); color: var(--ink-2); } .hero-meta .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; } /* ============================================================ Buttons — primary / secondary / quiet ============================================================ */ .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; min-height: 44px; padding: 0 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; line-height: 1; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .btn-block { width: 100%; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: color-mix(in srgb, var(--accent) 88%, #000); } .btn-secondary { background: var(--bg-surface); color: var(--accent); border-color: var(--accent); } .btn-secondary:hover { background: var(--accent-soft); } .btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--hair); } .btn-quiet:hover { background: var(--bg-sunk); color: var(--ink); } .btn .arrow { font-weight: 400; } /* pair "Review allergies →" */ /* ============================================================ Status chip — one modifier per enum, form + color (never color alone) ============================================================ */ .chip { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.015em; line-height: 1.4; padding: 0.2em 0.6em; border-radius: var(--radius-sm); white-space: nowrap; color: var(--st-pending); border: 1px solid color-mix(in srgb, currentColor 34%, transparent); background: color-mix(in srgb, currentColor 9%, var(--bg-surface)); } .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .chip.flat::before { display: none; } /* inline reassurance variant, no dot */ .chip.is-pending { color: var(--st-pending); } .chip.is-review { color: var(--st-review); } .chip.is-approved { color: var(--st-approved); } .chip.is-blocked { color: var(--st-blocked); } .chip.is-released { color: var(--st-released); } .chip.is-shipped { color: var(--st-shipped); } .chip.is-delivered { color: var(--st-delivered); } .chip.is-exception { color: var(--st-except); } /* ============================================================ Fulfillment stepper — order → compounding → released → shipped → delivered ============================================================ */ .stepper { display: flex; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; } .stepper .step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; position: relative; text-align: center; min-width: 0; } .stepper .bead { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--hair); background: var(--bg-surface); z-index: 1; } .stepper .step-label { font-size: 0.625rem; line-height: 1.15; color: var(--muted); letter-spacing: 0.01em; } /* the connecting rail sits between beads */ .stepper .step::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 1.5px; background: var(--hair); z-index: 0; } .stepper .step:first-child::before { display: none; } .stepper .step.done .bead { background: var(--st-released); border-color: var(--st-released); } .stepper .step.done .step-label { color: var(--ink-2); } .stepper .step.done::before { background: var(--st-released); } .stepper .step.current .bead { background: var(--st-shipped); border-color: var(--st-shipped); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-shipped) 18%, transparent); } .stepper .step.current .step-label { color: var(--st-shipped); font-weight: 600; } /* the rail leading into the current step is "travelled" */ .stepper .step.current::before { background: var(--st-released); } /* ============================================================ Completeness ring — CSS conic gradient, center % label Set --pct (0–100) and data-pct on the element. ============================================================ */ .ring-row { display: flex; align-items: center; gap: 1rem; } .ring { --pct: 0; --ring-size: 68px; --ring-track: var(--bg-sunk); --ring-fill: var(--accent); width: var(--ring-size); height: var(--ring-size); flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ring-fill) calc(var(--pct) * 1%), var(--ring-track) 0); } .ring::after { content: attr(data-pct) "%"; width: calc(var(--ring-size) - 16px); height: calc(var(--ring-size) - 16px); border-radius: 50%; background: var(--bg-surface); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); } @media (prefers-reduced-motion: no-preference) { .ring { transition: background 600ms ease; } } /* the checklist beside the ring */ .ring-list { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--t-sm); min-width: 0; } .ring-list .item { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-2); } .ring-list .tick { width: 16px; height: 16px; border-radius: 4px; flex: none; display: grid; place-items: center; font-size: 0.6rem; line-height: 1; color: #fff; } .ring-list .item.on .tick { background: var(--st-released); } .ring-list .item.off .tick { background: transparent; border: 1.5px solid var(--st-blocked); } .ring-list .item.off { color: var(--st-blocked); font-weight: 600; } /* ============================================================ Trajectory sparkline — sized container for an inline SVG ============================================================ */ .spark { display: flex; align-items: center; gap: 0.85rem; } .spark-chart { flex: none; width: 150px; height: 48px; display: block; } .spark-chart svg { width: 100%; height: 100%; display: block; } .spark-read { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4; } .spark-read b { color: var(--st-released); font-weight: 600; } /* helper classes for the inline SVG so screens stay hex-free */ .spark-baseline { stroke: var(--hair-soft); stroke-width: 1; } .spark-line { fill: none; stroke: var(--st-released); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .spark-area { fill: color-mix(in srgb, var(--st-released) 10%, transparent); stroke: none; } .spark-dot { fill: var(--st-released); } @media (prefers-reduced-motion: no-preference) { .spark-line[pathLength="1"] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spark-draw 1.1s ease-out forwards; } @keyframes spark-draw { to { stroke-dashoffset: 0; } } } /* ============================================================ List rows — label + value + optional action ============================================================ */ .rows { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--hair-soft); } .row:first-child { border-top: 0; } .row .row-label { color: var(--ink-2); font-size: var(--t-sm); } .row .row-spacer { flex: 1; } .row .row-value { font-size: var(--t-sm); font-weight: 500; color: var(--ink); text-align: right; } .row .row-value.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .row .row-action { font-size: var(--t-sm); font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; } .row .row-action:hover { text-decoration: underline; text-underline-offset: 2px; } /* tappable whole-row variant */ a.row, button.row { text-decoration: none; color: inherit; cursor: pointer; text-align: left; background: none; border-top: 1px solid var(--hair-soft); width: 100%; } a.row:hover, button.row:hover { background: var(--bg-sunk); margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); } a.row .chev::after, button.row .chev::after { content: "›"; color: var(--muted); font-size: 1.1rem; line-height: 1; } /* ============================================================ Waiver / consent banner ============================================================ */ .waiver { background: var(--accent-soft); border: 1px solid var(--accent-edge); border-radius: var(--radius); padding: 1rem var(--pad) 1.05rem; display: flex; flex-direction: column; gap: 0.75rem; } .waiver-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .waiver-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); line-height: 1.15; color: var(--ink); } .waiver-body { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--accent-ink); } .waiver .btn-primary { align-self: flex-start; } /* signed/settled variant — quiet, no call to action */ .waiver.is-settled { background: var(--bg-sunk); border-color: var(--hair); } .waiver.is-settled .waiver-body { color: var(--ink-2); } /* ============================================================ Trust marker row — honest attestations only ============================================================ */ .trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; } .trust-marker { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--ink-2); } .trust-marker .mark { width: 7px; height: 7px; border-radius: 50%; background: var(--st-released); flex: none; } .trust-marker.muted { color: var(--muted); } .trust-marker.muted .mark { background: var(--muted); } /* ============================================================ Small utilities (kept minimal; not a utility framework) ============================================================ */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .stack { display: flex; flex-direction: column; gap: var(--gap); } .stack-sm { display: flex; flex-direction: column; gap: 0.4rem; } .between { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ Desktop / responsive (revised 2026-06-26) — flex-based, robust. Mobile-first base above. >=900px (not forced-mobile): widen the card, move the tab bar to a TOP nav via flex order (it is a direct flex child of .app, so this can't strand it), 2-col card grids. The earlier grid+sidebar fought .tab-bar's sticky bottom -> removed. ============================================================ */ @media (min-width: 900px) { body:not(.view-mobile) { background: var(--bg-page); } body:not(.view-mobile) .app { max-width: 760px; min-height: calc(100dvh - 3rem); margin: 1.5rem auto; border-radius: 22px; box-shadow: var(--shadow-app); overflow: hidden; } body:not(.view-mobile) .app-header { order: 0; padding: 1rem 1.6rem; } body:not(.view-mobile) .tab-bar { order: 1; position: static; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.25rem; border-top: 0; border-bottom: 1px solid var(--hair); padding: 0.45rem 0.6rem; -webkit-backdrop-filter: none; backdrop-filter: none; } body:not(.view-mobile) .tab { flex-direction: row; gap: 0.45rem; padding: 0.5rem 0.9rem; } body:not(.view-mobile) .app-main { order: 2; padding: 1.6rem 1.8rem 2rem; } body:not(.view-mobile) .card-grid { grid-template-columns: 1fr 1fr; } body:not(.view-mobile) .screen-head h1 { font-size: 2rem; } body:not(.view-mobile) .hero-action { font-size: 1.5rem; } } /* Forced mobile preview keeps the phone column at any width */ body.view-mobile .app { max-width: var(--app-w); } /* Device toggle (prototype affordance; injected by patient-app.js) */ .rx-viewtoggle{position:fixed;z-index:9999;right:14px;bottom:14px;display:flex;gap:2px;padding:3px;border-radius:999px;background:#fff;border:1px solid var(--hair);box-shadow:var(--shadow-pop);font-family:var(--font-body);} .rx-viewtoggle button{appearance:none;border:0;background:transparent;color:var(--ink-2);font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;line-height:1;} .rx-viewtoggle button[aria-pressed="true"]{background:var(--accent);color:#fff;} @media print{.rx-viewtoggle{display:none;}} /* back-to-gallery affordance inside the device toggle */ .rx-viewtoggle .rx-back{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-size:16px;font-weight:600;line-height:1;} .rx-viewtoggle .rx-back:hover{background:var(--bg-sunk);color:var(--ink);} .rx-viewtoggle .rx-sep{align-self:center;width:1px;height:18px;background:var(--hair);margin:0 3px;}