/* The Rowan Clinic — Patient Portal · design system Principles: one clean sans, near-borderless surfaces, soft elevation, calm neutral canvas with a single green hero accent, strict 4pt rhythm. Type is Inter throughout — loaded once here, no per-page font links. BRAND IS TOKEN-CONTROLLED AND NOT YET FINAL. The visual identity is deliberately committed only at the token level (the "brand swap" block below). Re-skinning = changing those values; markup and component classes never reference raw colours. Illustration, iconography finalisation, motion and photography are intentionally deferred to the brand phase. */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700&family=Inter:wght@400;450;500;600;700&display=swap'); :root{ /* canvas & ink */ --page:#F4F2EC; --paper:#FFFFFF; --raise:#FBFAF7; --backdrop:#ffecb3; /* desktop frame backdrop only — NOT the app canvas */ --ink:#1A1A17; --muted:#54524A; --faint:#6F6D63; --line:#ECEAE1; --line-2:#E3E1D6; /* brand + semantic (restrained: green is the only hero accent) */ --green:#0F6E56; --green-deep:#04342C; --green-tint:#E1F5EE; --gold:#1D9E75; /* progress / positive accent (aura) */ --info:#0C447C; --info-tint:#E6F1FB; --amber:#8A5A12; --amber-tint:#FBEFD7; --alert:#AF482A; --alert-tint:#FAEBE3; --alert-ink:#8A3A1F; --coral-line:#F5C4B3; /* alert text/links + soft coral hairline (aura) */ --cream:#FAEEDA; --cream-ink:#854F0B; --cream-deep:#412402; /* warm tonal card (aura) */ --focus:#0F6E56; /* keyboard focus ring = hero accent */ --serif:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* display = headings + brand only; body/UI stays Inter. Token-level & reversible — brand is still intentionally unsettled (a SANS face, so the prior 'serif = wrong register' rejection stands). */ --display:'Bricolage Grotesque','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* scale */ --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px; --sh-1:0 0 0 1px var(--line-2); /* aura: flat hairline border, not a drop shadow */ --sh-2:0 0 0 1px var(--line-2); /* aura: flat hairline border, not a drop shadow */ } *{box-sizing:border-box;margin:0;padding:0} a{text-decoration:none;color:inherit} button{font:inherit;cursor:pointer;color:inherit} img,svg{display:block} /* Icons standardised to the Lucide spec: the geometry is already Feather/ Lucide; enforce uniform 2px stroke + round caps/joins so every icon across the prototype renders consistently. One rule, no dependency, offline-safe. */ svg[stroke]{stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* accessibility primitives (WCAG 2.2 AA is a build requirement) */ :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:5px} .apphead :focus-visible{outline-color:#EAF3EE} .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} body{font-family:var(--sans);background:var(--backdrop);color:var(--ink); line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; min-height:100vh;display:flex;align-items:center;justify-content:center;padding:36px 16px} /* Display face — headings + brand lockups only (one place; markup untouched). Everything else inherits Inter from body for clinical legibility. */ .brandmark .lg,.wordmark,.htitle,.hero,.greetblock h1,.center h4,.sheet h4, .qbody h2,.map h1,.map h2{font-family:var(--display)} /* device */ .device{width:452px;background:#15140F;border-radius:48px;padding:7px; box-shadow:0 40px 80px -40px rgba(20,19,16,.55)} .screen{position:relative;background:var(--page);border-radius:42px;overflow:hidden; height:914px;display:flex;flex-direction:column} /* Decorative phone notch removed (design decision): it sat centred and collided with centred subpage titles. Hidden in CSS so the markup in all 38 pages stays untouched and it's one-line reversible. */ .notch{display:none} @media (max-width:480px){ /* full-bleed: drop the desktop flex-centring + 100vh so the screen sits flush to the top. body min-height:100vh > .screen 100dvh (address bar) was centring the device and leaving empty space above every page. */ body{padding:0;display:block;min-height:0} .device{width:100%;border-radius:0;padding:0} .screen{border-radius:0;height:100vh;height:100dvh} } /* header */ .apphead{display:flex;align-items:center;justify-content:space-between; padding:16px 20px;background:var(--green);color:#EAF3EE; /* Compact, even 16px bar. Wordmark/avatar sit beside the centred notch, not under it, so no extra top clearance is needed in the frame. On a real notched phone env() adds only the actual status-bar inset. */ padding-top:max(16px,env(safe-area-inset-top))} .wordmark{font-size:17px;font-weight:600;letter-spacing:-.02em; display:flex;align-items:center;gap:9px;color:#fff} .berry{width:9px;height:9px;border-radius:50%;background:#EAF3EE;opacity:.85} .berry::after{content:none} .greet{font-size:12px;opacity:.72;font-weight:450;margin-top:3px;letter-spacing:0} .avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14); color:#EAF3EE;display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:600;letter-spacing:.02em} .back{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:#EAF3EE} .htitle{font-size:15px;font-weight:600;letter-spacing:-.01em} .hicons{display:flex;align-items:center;gap:16px} .hicons .bell{position:relative;display:inline-flex;opacity:.9} .hicons .bell i{position:absolute;top:-2px;right:-3px;width:7px;height:7px; border-radius:50%;background:#E5484D;box-shadow:0 0 0 2px var(--green)} /* body & rhythm */ .body{flex:1;min-height:0;padding:22px 18px 104px;overflow-y:auto} .body.flow{padding-bottom:26px} /* auth/splash screens: vertically centre the content group. auto-margins (not justify-content:center) so a tall screen still scrolls from the top instead of clipping. */ .body.authcenter{display:flex;flex-direction:column} .body.authcenter>:first-child{margin-top:auto} .body.authcenter>:last-child{margin-bottom:auto} .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--faint);font-weight:600;margin-bottom:14px} .minifoot{font-size:11px;color:var(--faint);line-height:1.55;text-align:center; padding:18px 8px 2px} /* primary treatment card */ .tcard{background:var(--paper);border-radius:var(--r-lg);padding:22px; margin-bottom:14px;box-shadow:var(--sh-2)} .tcard.amber{background:var(--amber-tint);box-shadow:var(--sh-1)} .tcard.alert{background:var(--alert-tint);box-shadow:var(--sh-1)} .tcard.paused{background:var(--raise);box-shadow:var(--sh-1)} .trow{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .tlabel{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.01em} .badge{font-size:11px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill); display:inline-flex;align-items:center;gap:6px;letter-spacing:.01em;white-space:nowrap} .badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7} .badge.ok{background:var(--green-tint);color:var(--green)} .badge.review{background:var(--amber-tint);color:var(--amber)} .badge.alert{background:var(--alert-tint);color:var(--alert)} .badge.paused{background:#EAE8DF;color:var(--muted)} .badge.info{background:var(--info-tint);color:var(--info)} .hero{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.02em; line-height:1.22;margin-bottom:7px} .tcard.alert .hero{color:var(--alert)} .sub{font-size:13.5px;color:var(--muted);margin-bottom:20px;line-height:1.5} .reassure{font-size:12.5px;color:var(--amber);background:rgba(255,255,255,.6); border-radius:var(--r-sm);padding:12px 14px;margin-bottom:18px;line-height:1.5} .reassure.good{color:var(--green);background:var(--green-tint)} /* buttons */ .btn{display:block;width:100%;text-align:center;font-size:15px;font-weight:600; letter-spacing:-.01em;padding:15px;border-radius:14px;border:none; transition:transform .04s ease} .btn:active{transform:scale(.992)} .btn-primary{background:var(--green);color:#fff} .btn-primary.alert{background:var(--alert)} /* primary CTAs carry a forward affordance icon */ .btn-primary::after{content:"→";display:inline-block;margin-left:9px;font-weight:600} .btn-ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2); margin-top:10px} .links{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--line); padding-top:4px} .lnk{display:flex;align-items:center;justify-content:space-between;padding:13px 2px; font-size:13.5px;color:var(--ink);font-weight:500} .lnk+.lnk{border-top:1px solid var(--line)} .lnk svg{color:var(--faint)} .lnk.quiet{color:var(--muted)} /* bottom nav */ .bnav{background:var(--paper);border-top:1px solid var(--line);display:flex; padding:11px 0 24px;flex:none} .bnav a{flex:1;text-align:center;font-size:10.5px;font-weight:600;color:var(--faint); display:flex;flex-direction:column;align-items:center;gap:5px;letter-spacing:.01em} .bnav a.on{color:var(--green)} /* bottom sheet */ .dim{position:absolute;inset:0;background:rgba(20,19,16,.4);z-index:30; backdrop-filter:saturate(.9) blur(1px)} .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--paper); border-radius:26px 26px 0 0;padding:10px 22px 28px;z-index:31; box-shadow:0 -20px 50px -24px rgba(20,19,16,.4);max-height:86%;overflow-y:auto} .grab{width:38px;height:4px;border-radius:2px;background:var(--line-2);margin:8px auto 18px} .sheet h4{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-bottom:7px} .sheet p.sp{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.5} .ordline{display:flex;justify-content:space-between;font-size:14px;padding:13px 0; border-bottom:1px solid var(--line)} .ordline .k{color:var(--muted)} .ordline .v{font-weight:600;text-align:right} .ordline.total{border-bottom:none;font-size:16px;padding-top:16px} .consent{font-size:11.5px;color:var(--muted);background:var(--raise); border-radius:var(--r-sm);padding:13px 14px;margin:16px 0 18px;line-height:1.55} .flabel{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:10px; letter-spacing:.01em} /* segmented + picker */ .seg{display:flex;gap:8px;margin:6px 0 20px;flex-wrap:wrap} .seg .opt{flex:1;min-width:78px;text-align:center;font-size:13px;font-weight:600; padding:12px 8px;border-radius:var(--r-sm);color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-2)} .seg .opt.sel{color:var(--green);background:var(--green-tint);box-shadow:none} .picker{border-radius:var(--r-md);overflow:hidden;margin-bottom:20px;background:var(--paper); box-shadow:inset 0 0 0 1px var(--line)} .pi{display:flex;align-items:center;justify-content:space-between;padding:15px 16px; font-size:14px;border-bottom:1px solid var(--line)} .pi:last-child{border-bottom:none} .pi .chk{width:20px;height:20px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--line-2)} .pi.sel{background:var(--green-tint);color:var(--green);font-weight:600} .pi.sel .chk{background:var(--green);box-shadow:none} /* result screens */ .center{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:flex-start;text-align:center;padding:84px 34px 44px} .spinner{width:42px;height:42px;border-radius:50%;border:3px solid var(--line-2); border-top-color:var(--green);margin-bottom:24px;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .tick{width:58px;height:58px;border-radius:50%;background:var(--green-tint);display:flex; align-items:center;justify-content:center;margin-bottom:22px;color:var(--green)} .warn{width:58px;height:58px;border-radius:50%;background:var(--alert-tint);display:flex; align-items:center;justify-content:center;margin-bottom:22px;color:var(--alert)} .center h4{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-bottom:10px} .center p{font-size:13.5px;color:var(--muted);max-width:250px;margin-bottom:6px;line-height:1.55} .center .onum{font-size:13px;font-weight:600;color:var(--ink);background:var(--raise); padding:7px 14px;border-radius:var(--r-sm);margin:10px 0 24px} /* account */ .acct{border-radius:var(--r-md);overflow:hidden;background:var(--paper); margin-bottom:14px;box-shadow:var(--sh-1)} .ar{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:16px 18px;border-bottom:1px solid var(--line);font-size:14px} .ar:last-child{border-bottom:none} .ar .l{display:flex;flex-direction:column;min-width:0} .ar>.badge,.ar>svg{flex:none} .ar .l small{font-size:12px;color:var(--muted);margin-top:3px;font-weight:400} .ar b{font-weight:600;letter-spacing:-.01em} .ar.danger b{color:var(--alert)} .legalbox{font-size:11px;color:var(--faint);line-height:1.6;padding:6px 6px 0} /* chat */ .bub-them{align-self:flex-start;max-width:82%;background:var(--paper); border-radius:18px 18px 18px 5px;padding:12px 15px;font-size:13.5px; line-height:1.5;box-shadow:var(--sh-1)} .bub-me{align-self:flex-end;max-width:82%;background:var(--green);color:#fff; border-radius:18px 18px 5px 18px;padding:12px 15px;font-size:13.5px;line-height:1.5} .bub-time{font-size:11px;color:var(--faint);margin-top:7px} .bub-me .bub-time{color:rgba(255,255,255,.7)} .composer{margin-top:auto;display:flex;gap:10px;align-items:center; border-top:1px solid var(--line);padding-top:16px} .composer .field{flex:1;background:var(--raise);border-radius:var(--r-pill); padding:13px 18px;font-size:13px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)} .composer .send{width:44px;height:44px;border-radius:50%;background:var(--green); display:flex;align-items:center;justify-content:center;color:#fff;flex:none;border:0} /* ── rich home ───────────────────────────────────────────────── */ .greetblock{padding:6px 4px 18px} .greetblock .d{font-size:12px;color:var(--faint);margin-bottom:6px;font-weight:500; letter-spacing:.02em} .greetblock h1{font-size:25px;font-weight:600;letter-spacing:-.025em; color:var(--ink);margin-bottom:6px} .greetblock p{font-size:13.5px;color:var(--muted);line-height:1.5} .panel{background:var(--paper);border-radius:var(--r-lg);padding:20px; margin-bottom:14px;box-shadow:var(--sh-2)} .panel .ph{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px} .panel .ph [style*="font-weight:600"]{letter-spacing:-.01em} .eyebrow2{font-size:10.5px;color:var(--faint);text-transform:uppercase; letter-spacing:.08em;margin-bottom:8px;font-weight:600} .metric{display:flex;align-items:baseline;gap:8px} .metric .big{font-size:34px;font-weight:600;line-height:1;color:var(--ink); letter-spacing:-.03em} .metric .u{font-size:13px;color:var(--muted)} .chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px; border-radius:var(--r-pill);background:var(--green-tint);color:var(--green); font-size:11px;font-weight:600;margin-left:8px} .rangebtns{display:flex;gap:6px} .rangebtns button{font-size:11px;font-weight:600;padding:5px 11px;border-radius:8px; background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)} .rangebtns button.on{background:var(--ink);color:var(--paper);box-shadow:none} .stats{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:18px;padding-top:18px; border-top:1px solid var(--line)} .stats .c{padding-left:16px} .stats .c:first-child{padding-left:0} .stats .c+.c{border-left:1px solid var(--line)} .stats .lab{font-size:10px;color:var(--faint);text-transform:uppercase; letter-spacing:.07em;margin-bottom:5px;font-weight:600} .stats .val{font-size:15px;font-weight:600;letter-spacing:-.01em} .stats .sm{font-size:11px;color:var(--muted);margin-top:1px} .stats .sm.accent{color:var(--gold)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px} .tcardlite{border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1)} .tcardlite .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .tcardlite .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:600} .tcardlite .cd{display:flex;align-items:baseline;gap:6px;margin-bottom:3px} .tcardlite .cd .big{font-size:30px;font-weight:600;line-height:1;letter-spacing:-.03em} .tcardlite .ttl{font-size:15px;font-weight:600;margin-bottom:3px;letter-spacing:-.01em} .tcardlite .meta{font-size:11.5px;margin-bottom:14px;line-height:1.45} .tone-a{background:var(--green-tint)} .tone-a .k,.tone-a .ic{color:var(--green)} .tone-a .big{color:var(--green-deep)}.tone-a .meta{color:var(--green)} .tone-a .btn-s{background:var(--green-deep);color:var(--green-tint)} .tone-b{background:var(--cream)} .tone-b .k,.tone-b .ic{color:var(--cream-ink)} .tone-b .ttl{color:var(--cream-deep)}.tone-b .meta{color:var(--cream-ink)} .tone-b .btn-s{background:var(--cream-deep);color:var(--cream)} .btn-s{display:inline-flex;align-items:center;gap:6px;border:0;padding:9px 15px; border-radius:11px;font-size:12px;font-weight:600;letter-spacing:-.01em} .dosegrid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px} .dosegrid .cell{text-align:center} .dosegrid .box{height:36px;border-radius:9px;background:var(--green-tint); display:flex;align-items:center;justify-content:center;color:var(--green)} .dosegrid .box.due{background:var(--paper);color:var(--alert); box-shadow:inset 0 0 0 1.5px var(--alert)} .dosegrid .lab{font-size:10px;color:var(--faint);margin-top:5px;font-weight:500} .dosegrid .lab.due{color:var(--alert);font-weight:600} .note-row{font-size:12px;color:var(--muted);margin-top:16px;padding-top:14px; border-top:1px solid var(--line);display:flex;gap:7px;align-items:center;line-height:1.45} .note-row a{color:var(--ink);font-weight:600} .otrack{position:relative;padding:0 6px;margin-top:6px} .otrack .bar{position:absolute;top:6px;left:14px;right:14px;height:2px;background:var(--line-2)} .otrack .fill{position:absolute;top:6px;left:14px;height:2px;background:var(--info)} .otrack .row{display:grid;grid-template-columns:repeat(5,1fr);position:relative} .otrack .s{text-align:center} .otrack .nd{width:14px;height:14px;border-radius:50%;margin:0 auto;background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line-2)} .otrack .s.done .nd{background:var(--info);box-shadow:none;display:flex; align-items:center;justify-content:center} .otrack .s.now .nd{background:var(--paper);box-shadow:inset 0 0 0 2px var(--info)} .otrack .t1{font-size:10px;margin-top:8px;font-weight:600} .otrack .t2{font-size:9px;color:var(--faint);margin-top:1px} .otrack .s.muted .t1{color:var(--muted);font-weight:500} /* soft tonal blocker card — calm warm surface, no shadow, no red rule */ .alert-tile{background:var(--paper);border-radius:var(--r-lg);padding:18px; margin-bottom:14px;box-shadow:0 0 0 1px var(--coral-line)} .alert-tile .in{display:flex;gap:14px;align-items:flex-start} .alert-tile .ico{width:38px;height:38px;border-radius:12px;background:var(--alert-tint); color:var(--alert);display:flex;align-items:center;justify-content:center;flex:none} .alert-tile .ti2{font-size:14.5px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em; color:var(--ink)} .alert-tile .ds{font-size:12.5px;color:var(--muted);margin-bottom:14px;line-height:1.5} .alert-tile a.u{display:inline-flex;align-items:center;gap:7px;background:var(--green-tint); color:var(--green-deep);font-size:12.5px;font-weight:600;padding:10px 17px;border-radius:14px; letter-spacing:-.01em;transition:transform .04s ease} .alert-tile a.u::after{content:"→";font-weight:600} .alert-tile a.u:active{transform:scale(.99)} .sec-h{display:flex;justify-content:space-between;align-items:center;padding:0 2px; margin:8px 0 12px} .sec-h .t{font-size:13px;font-weight:600;letter-spacing:-.01em} .sec-h a{font-size:12px;color:var(--muted);font-weight:500} .ctiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .ctile{background:var(--paper);border-radius:var(--r-md);padding:15px;box-shadow:var(--sh-1)} .ctile svg{color:var(--green);margin-bottom:10px} .ctile .t{font-size:12px;font-weight:600;line-height:1.3;margin-bottom:3px; letter-spacing:-.01em} .ctile .m{font-size:10px;color:var(--faint)} .supportbar{display:flex;align-items:center;justify-content:space-between; padding:16px 18px;background:var(--cream);color:var(--cream-deep);border-radius:var(--r-md); box-shadow:var(--sh-1);margin-bottom:4px} .supportbar .l{display:flex;align-items:center;gap:12px} .supportbar .av{width:32px;height:32px;border-radius:50%;background:rgba(124,79,18,.12); display:flex;align-items:center;justify-content:center} .supportbar .t{font-size:13px;font-weight:600;letter-spacing:-.01em} .supportbar .m{font-size:11px;opacity:.66;margin-top:1px} /* ── activity ────────────────────────────────────────────────── */ .actsum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px} .actsum .t{background:var(--paper);border-radius:var(--r-md);padding:15px 14px; box-shadow:var(--sh-1)} .actsum .n{font-size:22px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em} .actsum .l{font-size:10px;color:var(--faint);margin-top:7px;text-transform:uppercase; letter-spacing:.06em;font-weight:600} .chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:20px; scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chips .ch{flex:none;font-size:12px;font-weight:600;padding:8px 14px; border-radius:var(--r-pill);color:var(--muted);background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2)} .chips .ch.on{background:var(--ink);color:var(--paper);box-shadow:none} .glabel{font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase; letter-spacing:.09em;margin:6px 2px 12px} /* de-boxed: one quiet surface, hairline-separated rows */ .afeed{background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-1); margin-bottom:20px;overflow:hidden} .fitem{display:flex;gap:14px;align-items:flex-start;padding:16px 16px} .fitem+.fitem{border-top:1px solid var(--line)} .fitem .ci{width:34px;height:34px;border-radius:10px;flex:none;display:flex; align-items:center;justify-content:center} .ci.order{background:var(--info-tint);color:var(--info)} .ci.clin{background:var(--green-tint);color:var(--green)} .ci.deliv{background:#EDEBE3;color:var(--muted)} .ci.report{background:var(--alert-tint);color:var(--alert)} .fitem .fb{flex:1;min-width:0} .fitem h5{font-size:13.5px;font-weight:600;letter-spacing:-.01em} .fitem .fm{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45} .fitem .ftag{display:inline-block;font-size:10px;font-weight:600;padding:3px 9px; border-radius:var(--r-pill);margin-top:9px;background:var(--green-tint);color:var(--green)} .fitem .ftag.warn{background:var(--alert-tint);color:var(--alert)} .fitem .ftag.info{background:var(--info-tint);color:var(--info)} .fitem .fch{color:var(--faint);flex:none;align-self:center} /* ── prototype screen map (index) ────────────────────────────── */ .map{max-width:780px;margin:0 auto;background:var(--paper);border-radius:var(--r-lg); padding:38px 34px;box-shadow:var(--sh-2)} .map .kick{font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--green);font-weight:700} .map h1{font-size:30px;font-weight:600;color:var(--ink);margin:10px 0 6px;letter-spacing:-.03em} .map .lead{font-size:14px;color:var(--muted);margin-bottom:26px;line-height:1.55} .map h2{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase; letter-spacing:.08em;margin:26px 0 12px;border-top:1px solid var(--line);padding-top:22px} .map .grp{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .map a.s{display:block;border-radius:var(--r-sm);padding:14px 16px;background:var(--raise); font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line); letter-spacing:-.01em;transition:transform .05s ease} .map a.s:hover{transform:translateY(-1px)} .map a.s small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:4px} .map a.start{display:inline-block;background:var(--green);color:#fff;font-weight:600; padding:14px 28px;border-radius:12px;margin-top:8px;letter-spacing:-.01em} .map .note{font-size:11.5px;color:var(--faint);margin-top:28px;border-top:1px solid var(--line); padding-top:18px;line-height:1.6} /* supply progress (home-repeat) */ .pbar{height:8px;border-radius:var(--r-pill);background:var(--green-tint); overflow:hidden;margin:8px 0 12px} .pbar i{display:block;height:100%;background:var(--gold);border-radius:var(--r-pill)} .pmeta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted); font-weight:500} .pnote{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5} /* contextual severe-reaction escalation — loud, only in clinical-risk flows (report a side effect, pause, message). This is the real safety win: prominent exactly where a deteriorating patient is looking. */ .erflag{display:flex;gap:11px;align-items:flex-start;background:var(--alert-tint); color:var(--alert-ink);border-radius:var(--r-sm);padding:13px 15px; margin-bottom:16px;font-size:12.5px;line-height:1.5; box-shadow:inset 3px 0 0 var(--alert)} .erflag svg{color:var(--alert);flex:none;margin-top:1px} .erflag b{font-weight:600} .erflag a{color:var(--alert-ink);font-weight:700;text-decoration:underline; text-underline-offset:2px} /* support quick-grid (home-multi) — previously referenced but never defined; mirrors the .ctile language so the screen renders as designed */ .qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .qtile{background:var(--paper);border-radius:var(--r-md);padding:15px 13px; box-shadow:var(--sh-1);display:flex;flex-direction:column;align-items:flex-start; gap:10px;font-size:12px;font-weight:600;color:var(--ink);line-height:1.3; letter-spacing:-.01em} .qtile svg{color:var(--green)} /* data slot — marks a value rendered by Nexus at runtime, never hardcoded. Used to prove the template is condition-agnostic while still satisfying the consent/GDPR duty to show the exact medicine + dose. */ .slot{background:var(--green-tint);color:var(--green-deep);font-weight:600; border-radius:6px;padding:1px 7px;box-decoration-break:clone; -webkit-box-decoration-break:clone;letter-spacing:0} .slot-note{font-size:11px;color:var(--faint);line-height:1.5;margin-top:14px; display:flex;gap:7px;align-items:flex-start} .slot-note svg{flex:none;margin-top:1px} /* form primitives (login, update-payment) — real labels + inputs */ .fld{margin-bottom:16px} .fld label{display:block;font-size:12px;font-weight:600;color:var(--muted); margin-bottom:7px;letter-spacing:.01em} .fld input{width:100%;font:inherit;font-size:15px;color:var(--ink); background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-sm); padding:14px 15px;-webkit-appearance:none;appearance:none} .fld input::placeholder{color:var(--faint)} .fld input:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:transparent} .fld .hint{font-size:11.5px;color:var(--faint);margin-top:7px;line-height:1.5} .formnote{font-size:11.5px;color:var(--faint);line-height:1.6;text-align:center; padding:16px 6px 2px} .brandmark{display:flex;flex-direction:column;align-items:center;text-align:center; padding:14px 0 26px} .brandmark .lg{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:600; color:var(--ink);letter-spacing:-.02em} .brandmark .lg .berry{width:11px;height:11px;border-radius:50%;background:var(--green);opacity:1} .brandmark .sub{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5} /* ── treatment check-in ────────────────────────────────────────── A clinician-reviewed submission, NOT self-logging and never charted back to the patient. Condition-agnostic: the question set is supplied by Nexus per module pack. Reuses .fld / .seg / .picker / .pi. */ .fld textarea{width:100%;font:inherit;font-size:14.5px;color:var(--ink); background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-sm); padding:13px 15px;min-height:84px;resize:vertical;line-height:1.5; -webkit-appearance:none;appearance:none} .fld textarea::placeholder{color:var(--faint)} .fld textarea:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:transparent} .steps{display:flex;align-items:center;gap:8px;margin:2px 2px 18px;font-size:11px; font-weight:600;color:var(--muted);letter-spacing:.02em} .steps .track{flex:1;height:5px;border-radius:var(--r-pill);background:var(--line-2); overflow:hidden} .steps .track i{display:block;height:100%;background:var(--green);border-radius:var(--r-pill)} .fsec{margin:0 0 22px;border:0;padding:0;min-width:0} .fsec>legend{display:block;width:100%;font-size:13px;font-weight:600;color:var(--ink); letter-spacing:-.01em;padding:0;margin-bottom:4px} .fsec .fsub{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:12px} /* native, working selection for check-in controls — no JS. Real radio/checkbox inside