/* ============================================================================
hq-ui.css — foundation layer, loaded AFTER app.css.
Why a second file rather than 1,100 more lines in the first: everything here is
cross-cutting. It applies to all 169 pages without any of them being edited, which
matters because there are ~2,300 inline style attributes in the markup and no
component layer to change instead. Keeping it separate also means the whole layer
can be reverted with one tag if something regresses.
Order inside the file: reset/type, accessibility, responsive, motion, components.
========================================================================== */
/* ============================================================================
1. TYPE & RHYTHM
========================================================================== */
/* Fluid, capped. 15px on a phone and 16px on a desktop, without a breakpoint —
clamp() interpolates between them. Everything sized in rem follows automatically. */
html{font-size:clamp(15px,.92rem + .18vw,16px);-webkit-text-size-adjust:100%}
body{line-height:1.55;text-rendering:optimizeLegibility}
/* Long clinical notes, addresses and expert bios were breaking layouts because nothing
constrained them. */
p,li,dd{overflow-wrap:break-word}
/* Numbers that change in place — counters, prices, durations — were shifting their own
width as digits changed, making dashboards twitch. Opt-in via [data-numeric] for table
cells, since a blanket rule would also hit text columns where it looks wrong. */
.stat .n,.kv .val,.pkg-price-display b,.hq-count,
[data-numeric]{font-variant-numeric:tabular-nums}
/* ============================================================================
2. ACCESSIBILITY
This app handles PHI and is sold to corporate buyers, whose procurement asks
about WCAG. Before this layer: role= appeared 0 times across 169 files, aria-*
3 times, there was no skip link, and h1/h2/h3 had outline:none.
========================================================================== */
/* ---- Focus. A visible, consistent ring on anything reachable by keyboard.
:focus-visible (not :focus) so a mouse click doesn't leave a ring behind — that
is the reason people reach for outline:none in the first place. The double ring
(card-coloured inner, accent outer) stays visible on every background in the
app, including the dark sidebar and coloured banners. */
/* [tabindex="-1"] is deliberately excluded.
A heading given tabindex="-1" and focused on navigation is a screen-reader convenience —
it moves the reading position to the top of the new page. It is not something the person
clicked or tabbed to, so drawing a focus ring around it puts a box around the page title
for a sighted user who did nothing. That is what was happening on the login heading.
-1 means "focusable by script, not by tab", which is exactly the set that should not get a
visible ring. Every genuinely tabbable element (tabindex="0" or positive) still does. */
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]),[role="button"],[role="tab"]):focus-visible{
outline:none;
box-shadow:var(--focus-ring);
border-radius:var(--r-sm);
position:relative;
z-index:1;
}
/* Fields already own their focus treatment; keep it and add the ring on top of it. */
.field:focus-visible{box-shadow:0 0 0 4px var(--rose-soft), var(--focus-ring)}
/* Forced-colours (Windows High Contrast) throws away box-shadow, so the ring needs a
real outline there or focus becomes invisible for the people most relying on it. */
@media (forced-colors:active){
/* Same exclusion as above: a script-focused heading is not a tab stop. */
:where(a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid Highlight;outline-offset:2px}
}
/* ---- Skip link. Every page put the same ~40-item sidebar before its content, so a
keyboard or screen-reader user had to pass all of it on every single navigation.
fixed, not absolute, so it still works if focus is restored after a scroll. */
.skip-link{
position:fixed;left:50%;top:calc(var(--s-2) * -12);
transform:translateX(-50%);
z-index:calc(var(--z-toast) + 1);
background:var(--accent);color:#fff;
padding:var(--s-3) var(--s-5);border-radius:0 0 var(--r-md) var(--r-md);
font-size:14px;font-weight:600;
box-shadow:var(--e-3);
transition:top var(--t-base) var(--ease-out);
}
/* Centred rather than tucked into the corner, because on mobile the corner is where the
hamburger lives and the two would sit on top of each other. */
.skip-link:focus{top:0}
/* ---- Screen-reader-only text, for labels that would be visual clutter but that a
non-visual user needs (icon-only buttons, table captions, live regions). */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.sr-only-focusable:focus,.sr-only-focusable:focus-within{
position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;
}
/* ---- Icon-only controls. Emoji and glyph buttons read as literal characters
("black telephone", "heavy multiplication x") without a label. */
button:not([aria-label]):not([title]):empty::after{content:"button"}
/* ---- Colour is never the only signal. Status pills carried meaning purely in hue,
which excludes ~8% of men. A leading marker gives the same information without it. */
.pill.ok::before{content:"● ";}
.pill.pending::before{content:"◐ ";}
.pill.err::before,.pill.rejected::before{content:"✕ ";}
/* ---- Motion. Was one rule covering .reveal only; the login page's floating blobs,
the spinning brand dot and every hover transform ran regardless. Vestibular
disorders are triggered by exactly that kind of large, looping movement. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
scroll-behavior:auto!important;
}
.login-page::before,.login-page::after,.brand .dot{animation:none!important}
.reveal,.hq-stagger>*{opacity:1!important;transform:none!important}
}
/* ============================================================================
3. RESPONSIVE
The MAUI app reuses these same Razor components, so anything unfixed here ships
into the phone app too.
========================================================================== */
/* ---- Tables. 18 files render a
; only 2 wrapped it in something scrollable,
so 16 pages tore their layout open on a phone. Fixing that per page would mean
editing markup in all of them; this does it once, for every table that exists now
or is added later, without any of them being touched.
display:block on the table is what makes overflow work at all — a
ignores
overflow otherwise. It costs the column-width algorithm, which is why min-width
forces the table to keep its natural desktop width and scroll rather than crush
columns into unreadable slivers. */
@media (max-width:900px){
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table > tbody,table > thead,table > tfoot{min-width:max-content}
/* Scrolling has to be discoverable or it may as well not exist — this is the shadow
that appears only when there is more table to the right. */
table{
background:
linear-gradient(to right,var(--card) 30%,transparent) left/40px 100% no-repeat,
linear-gradient(to left,var(--card) 30%,transparent) right/40px 100% no-repeat,
radial-gradient(farthest-side at 0 50%,rgba(var(--shadow-ink),.14),transparent) left/14px 100% no-repeat,
radial-gradient(farthest-side at 100% 50%,rgba(var(--shadow-ink),.14),transparent) right/14px 100% no-repeat;
background-attachment:local,local,scroll,scroll;
}
}
/* ---- Touch targets. Several .btn variants sat at padding:8px 14px — about 32px tall.
Apple and Google both specify 44px, and sub-44px controls are most of why a web app
feels "not quite native" on a phone. Applied only on coarse pointers so desktop
density (which this admin tool depends on) is untouched. */
@media (pointer:coarse){
.btn,.cta,button:not(.star):not(.mobile-nav-toggle),
.role-choice-btn,.slotchip,.chip,select,input[type="checkbox"],input[type="radio"]{
min-height:44px;
}
input[type="checkbox"],input[type="radio"]{min-width:24px;width:24px;height:24px}
.btn,.cta{padding-inline:var(--s-4)}
/* A tap target can be 44px without the element looking 44px — this keeps small
inline actions visually compact while still being comfortably tappable. */
.exp-actions .btn,.sess-actions .btn{display:inline-flex;align-items:center}
/* iOS zooms the whole page when a focused input is under 16px. */
input,select,textarea{font-size:max(16px,1em)}
}
/* ---- One breakpoint scale. The stylesheet used 480/600/640/700/800/900/1000 with no
system behind which was which. New rules use these three; existing ones are left as
they are rather than risk regressions across 169 pages for tidiness alone.
sm 640 — phone
md 900 — tablet / sidebar collapse (matches the existing nav breakpoint)
lg 1200 — desktop
---------------------------------------------------------------------------- */
/* Content width was fixed at 1080px, which wastes half of a modern monitor on the
data-dense admin tables this app is mostly made of. */
@media (min-width:1400px){
.wrap{max-width:1200px}
.wrap-wide{max-width:1500px}
}
/* Horizontal overflow anywhere shows as a page that rubber-bands sideways on a phone —
easy to ship, hard to notice on a desktop. */
@media (max-width:640px){
html,body{overflow-x:hidden}
.wrap,.wrap-wide{padding-left:var(--s-4);padding-right:var(--s-4)}
.topbar{padding-inline:var(--s-4)}
.topbar h1{font-size:18px}
.card{padding:var(--s-4);border-radius:var(--r-md)}
.grid,.cols,.card-grid,.pkg-grid{grid-template-columns:1fr!important;gap:var(--s-3)}
.modal-card{border-radius:var(--r-lg) var(--r-lg) 0 0}
}
/* Full-height layouts were using 100vh, which on iOS Safari means "the viewport with
the address bar hidden" — so the bottom of the sidebar and the login screen sat
under the browser chrome and could not be reached. dvh is the fix. */
@supports (height:100dvh){
.hq-side{height:100dvh}
.login-page{min-height:100dvh}
.hq-app{min-height:100dvh}
}
/* Devices with a notch or a home indicator. The padding goes on .nav, not on the scroll
container — padding on .hq-side sits outside the nav's painted area, which reopened the
same two-colour band at the very bottom of the menu that .hq-side's background fixes. */
@supports (padding:max(0px)){
.nav{padding-bottom:max(var(--s-5),env(safe-area-inset-bottom))}
.fab-wrap,.crisis-fab{bottom:max(var(--s-5),env(safe-area-inset-bottom))}
}
/* ============================================================================
4. MOTION
What existed was decorative — floating blobs on the login page. What was missing
was the kind that carries information: what is loading, what just arrived, what
responded to a tap. That is the difference people read as "well built".
========================================================================== */
/* ---- Skeletons. 33 pages showed the word "Loading…". Text-as-loading-state reads as
unfinished; a shape the size of the content that is coming reads as fast, because the
layout stops jumping when data lands. */
.sk{
background:linear-gradient(90deg,var(--line-2) 25%,var(--field) 37%,var(--line-2) 63%);
background-size:400% 100%;
animation:sk-shimmer 1.4s var(--ease-in-out) infinite;
border-radius:var(--r-sm);
}
@keyframes sk-shimmer{from{background-position:100% 50%}to{background-position:0 50%}}
.sk-text{height:1em;margin:.35em 0}
.sk-text.w-40{width:40%}.sk-text.w-60{width:60%}.sk-text.w-80{width:80%}
.sk-title{height:1.5em;width:45%;margin-bottom:var(--s-4)}
.sk-avatar{width:44px;height:44px;border-radius:var(--r-md);flex:0 0 auto}
.sk-card{height:120px;border-radius:var(--r-lg)}
.sk-row{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) 0}
.sk-row .sk-text{flex:1}
/* ---- Stagger. Lists arriving all at once read as a flash; arriving in sequence reads
as being assembled. Capped at 10 because beyond that the last item feels late rather
than deliberate. */
.hq-stagger>*{animation:hq-rise .38s var(--ease-out) both}
.hq-stagger>*:nth-child(1){animation-delay:.02s}
.hq-stagger>*:nth-child(2){animation-delay:.05s}
.hq-stagger>*:nth-child(3){animation-delay:.08s}
.hq-stagger>*:nth-child(4){animation-delay:.11s}
.hq-stagger>*:nth-child(5){animation-delay:.14s}
.hq-stagger>*:nth-child(6){animation-delay:.17s}
.hq-stagger>*:nth-child(7){animation-delay:.20s}
.hq-stagger>*:nth-child(8){animation-delay:.23s}
.hq-stagger>*:nth-child(9){animation-delay:.26s}
.hq-stagger>*:nth-child(n+10){animation-delay:.28s}
@keyframes hq-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ---- Press feedback. Blazor Server round-trips to the server for every click, so
without a local response the UI feels dead for the length of the network hop —
the single biggest reason a Blazor Server app can feel sluggish when it isn't. */
@media (prefers-reduced-motion:no-preference){
.btn,.cta,.chip,.slotchip,.role-choice-btn,.nav a{
transition:transform var(--t-fast) var(--ease-spring),
background-color var(--t-fast) linear,
box-shadow var(--t-base) var(--ease-out);
}
.btn:active:not(:disabled),.cta:active:not(:disabled),
.chip:active,.slotchip:active,.role-choice-btn:active{transform:scale(.97)}
}
/* ---- Busy state. A disabled button during a save tells you nothing about why. */
[aria-busy="true"],.is-busy{position:relative;pointer-events:none;color:transparent!important}
[aria-busy="true"]::after,.is-busy::after{
content:"";position:absolute;inset:0;margin:auto;
width:16px;height:16px;border-radius:50%;
border:2px solid currentColor;border-top-color:transparent;
color:#fff;animation:hq-spin .6s linear infinite;
}
.btn.ghost[aria-busy="true"]::after,.btn.ghost.is-busy::after{color:var(--ink)}
@keyframes hq-spin{to{transform:rotate(360deg)}}
/* ============================================================================
5. COMPONENT REFINEMENT
Surface-level only. Everything below reuses classes the markup already applies,
so no page needs editing to pick it up.
========================================================================== */
/* Cards: a hairline plus a genuine two-layer shadow instead of the flat 1px one.
Calm-clinical means restraint — this is deliberately close to flat when at rest. */
.card,.stat,.exp-card,.pkg-card,.phead{
box-shadow:var(--e-1);
transition:box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out);
}
@media (hover:hover){.card:hover,.stat:hover{box-shadow:var(--e-2)}}
@media (hover:hover){.exp-card:hover,.pkg-card:hover{box-shadow:var(--e-3);border-color:var(--line)}}
/* Section headings sat at the same weight as body text in several places. */
.card h3{letter-spacing:-.005em;color:var(--ink)}
/* The sidebar's active item was a solid accent block — heavy, and it fought every
other accent on the page. A rail plus a tinted ground is quieter and still
unambiguous, and it survives a theme change without a contrast problem. */
.nav a.active{
background:var(--accent-soft);
color:var(--accent);
font-weight:600;
position:relative;
}
.nav a.active::before{
content:"";position:absolute;left:0;top:20%;bottom:20%;
width:3px;border-radius:0 var(--r-pill) var(--r-pill) 0;background:var(--accent);
}
.nav a{transition:background-color var(--t-fast) linear,color var(--t-fast) linear}
/* The sticky header's border was a hard 1px line that read as a box edge. A hairline plus
a very short ambient shadow reads as a surface floating above the content instead.
(A scroll-aware border that only appears once content is behind it would be better
still, but it needs either a JS listener or scroll-driven animations, which Safari and
Firefox do not ship yet — so this is the version that actually works everywhere.) */
.topbar{
border-bottom-color:var(--line-2);
box-shadow:0 1px 0 rgba(var(--shadow-ink),.03), 0 4px 12px -8px rgba(var(--shadow-ink),.10);
}
/* Table legibility lives in section 11, with the rest of the admin list styling — these
rules were written here first and then again there, which is exactly the duplication this
whole exercise is meant to remove. .simple-table picks up the same treatment there. */
/* Empty states: there is already an component with its own styles in
app.css (.empty-state-icon, h3, .empty-state-actions). A parallel set was written here
before that was noticed, which silently overrode its padding and paragraph width while
adding .ico/b rules for elements the component never renders. Removed — the existing
one is correct and this file should not be quietly reinterpreting it. */
/* Anything that scrolls inside the page keeps a slim, theme-aware scrollbar rather
than the OS default, which on Windows is a wide grey slab. */
.hq-side,.msg-contacts,[class*="-scroll"]{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill);border:3px solid transparent;background-clip:content-box}
@media (hover:hover){::-webkit-scrollbar-thumb:hover{background:var(--navy-2);background-clip:content-box}}
::-webkit-scrollbar-track{background:transparent}
/* Selection in the app's own accent rather than the browser's default blue. */
::selection{background:var(--accent-soft);color:var(--accent)}
/* Print — invoices, prescriptions and reports are printed from this app, and they were
printing the sidebar, the floating assistant and the crisis button with them. */
@media print{
.hq-side,.mobile-nav-toggle,.nav-backdrop,.topbar,.hq-back-bar,
.fab-wrap,.crisis-fab,.skip-link,[class*="floating"]{display:none!important}
.hq-app{display:block}
.wrap,.wrap-wide{max-width:none;padding:0}
.card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}
/* ============================================================================
6. UTILITY LAYER
The markup carried ~2,300 inline style attributes and no component layer, which
made "change the corner radius everywhere" a 2,300-place find-and-replace instead
of one edit. 603 distinct style strings turned out to be 76% expressible as a
small set of names — spacing, text, flex — so those became classes and the markup
was migrated onto them. The remaining 24% are genuinely one-off (width:70px,
object-fit:cover) and stay inline, which is the correct place for them.
Spacing snaps to the 4pt scale in app.css. Two values in the old markup were off
it — 10px and 14px — and map UP to 12px and 16px. That is a deliberate 2px shift
in ~300 places: invisible on its own, and the entire reason to have a scale.
Deliberately NOT a full utility framework. Every class here earns its place by
replacing at least ten occurrences; anything rarer stays inline where it is
easier to read in context.
========================================================================== */
/* ---- Spacing ---- */
.m-0{margin:0}
.p-0{padding:0}
.mt-0{margin-top:0}
.mt-1{margin-top:var(--s-1)}
.mt-2{margin-top:var(--s-2)}
.mt-3{margin-top:var(--s-3)}
.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}
.mb-1{margin-bottom:var(--s-1)}
.mb-2{margin-bottom:var(--s-2)}
.mb-3{margin-bottom:var(--s-3)}
.mb-4{margin-bottom:var(--s-4)}
.mb-5{margin-bottom:var(--s-5)}
.mb-6{margin-bottom:var(--s-6)}
.my-2{margin-block:var(--s-2)}
.ml-auto{margin-left:auto}
/* ---- Text ----
Sizes collapse the old set (11/11.5/12/12.5/13/13.5/14px — seven sizes doing the
work of three) onto a type scale. Nothing in an interface needs a half-pixel
distinction nobody can perceive. */
.t-xs{font-size:12px}
.t-sm{font-size:13px}
.t-base{font-size:14px}
.t-muted{color:var(--muted)}
.t-body{color:var(--navy-2)}
.t-err{color:var(--err)}
/* Used on the retried count in the email log and defined nowhere, so a non-zero retry count
rendered in the default colour and read as normal. */
.t-warn{color:var(--amber)}
.t-ok{color:var(--ok)}
.t-accent{color:var(--gold-text)}
.t-center{text-align:center}
.t-right{text-align:right}
.fw-400{font-weight:400}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.lh-loose{line-height:1.7}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.92em}
/* ---- Layout ---- */
.flex{display:flex}
.flex-wrap{flex-wrap:wrap} /* NOT .wrap — that name is already the page container in app.css,
which carries max-width and page padding. Anything given .wrap
as a flex utility would have silently inherited both. */
.items-center{align-items:center}
.items-start{align-items:flex-start}
.between{justify-content:space-between}
.grow{flex:1}
.gap-2{gap:var(--s-2)}
.gap-3{gap:var(--s-3)}
.gap-4{gap:var(--s-4)}
.w-full{width:100%}
.pointer{cursor:pointer}
.no-border{border:none}
/* ---- State ----
background + border-color in the accent tint appeared as a pair 31 times and always
meant the same thing: this is the option you picked. */
.is-picked{background:var(--gold-soft);border-color:var(--gold-soft)}
/* ---- Composite ----
These are the shapes that repeated most across pages, named for what they are rather
than what they are made of. */
.hint-text{color:var(--muted);font-size:13px;margin:0;line-height:1.6}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.actions{display:flex;gap:var(--s-3);margin-top:var(--s-4);flex-wrap:wrap}
/* ============================================================================
7. TOUCH & WEBVIEW HARDENING
The MAUI app renders these same pages in a WebView, so anything left unhandled
here does not stay a web problem — it ships as an app problem, where users judge
it against native apps rather than against websites.
========================================================================== */
/* ---- Tap highlight. Android and older iOS WebViews paint a translucent grey or blue
rectangle over anything tapped, sized to the element box rather than its visual
shape — so a pill-shaped button flashes as a square. The :active states defined
earlier are the intended feedback; this removes the one the platform adds. */
a,button,[role="button"],.chip,.slotchip,.tag,.pill,label,summary{
-webkit-tap-highlight-color:transparent;
}
/* ---- Text selection. Long-pressing a button or a nav item pops the selection
handles and a copy menu, which never makes sense on a control. Content keeps
selection — people copy phone numbers, invoice IDs and prescription text. */
.nav,.topbar,.btn,.cta,.pill,.badge,.chip,.tag,.mobile-nav-toggle,
.wiz-steps,.stat .l,.skip-link{
-webkit-user-select:none;user-select:none;
}
p,td,pre,code,.kv .val,.doc,.hint-text,input,textarea,[data-selectable]{
-webkit-user-select:text;user-select:text;
}
/* ---- Scroll chaining. Scrolling to the end of a modal, the notification dropdown or
the sidebar handed the gesture to the page behind it — so the page scrolled while a
modal was open, and in a WebView the whole app view bounced or triggered
pull-to-refresh mid-interaction. */
.modal-card,.notif-dropdown,.fab-log,.chat-log,.hq-side,.med-results,
.rx-history,.transcript-log,.checkbox-list,.terms-scroll{
overscroll-behavior:contain;
}
body{overscroll-behavior-y:none}
/* ---- Momentum scrolling for older iOS WebViews. */
.hq-side,.modal-card,.chat-log,.fab-log,table{-webkit-overflow-scrolling:touch}
/* ---- Double-tap zoom. A 300ms delay before click fires on anything the browser thinks
might be double-tapped — the classic "the app feels laggy" that isn't the network. */
a,button,input,select,textarea,[role="button"],.chip,.slotchip{touch-action:manipulation}
/* ---- backdrop-filter. Cheap on iOS, expensive on Android WebView, where a blurred
sticky header repaints on every scroll frame and drops the whole list to ~30fps.
The header stays legible with a solid background instead. */
@media (max-width:900px){
.topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card)}
}
/* ---- The on-screen keyboard. A fixed-position action bar sits under the keyboard on
Android, which puts the submit button somewhere unreachable. Anchoring to the small
viewport keeps it above. */
@supports (height:100svh){
@media (max-width:900px){
.modal-overlay{height:100svh}
.fab-panel{max-height:70svh}
}
}
/* ---- Pointer-coarse hit area for close buttons, which are consistently the smallest
and most-missed control in any modal. */
@media (pointer:coarse){
.modal-card > button:first-child{min-width:44px;min-height:44px}
}
/* ---- Landscape phones. The sidebar drawer at 270px eats most of a 640px-tall
landscape viewport; and stat grids at four columns become unreadable slivers. */
@media (max-height:480px) and (orientation:landscape){
.hq-side{width:min(270px,60vw)}
.modal-card{max-height:92vh;padding:var(--s-4)}
.stats{grid-template-columns:repeat(2,1fr)}
}
/* ---- Fonts. The app requests Inter from Google's CDN, which in a mobile app means a
network round-trip to a third party before text can paint with the right face — and on
a slow or absent connection, either a long swap or no swap at all. system-ui is the
fallback so the first paint is always correct-ish, and for the packaged app the font
should be bundled locally rather than fetched. Documented here because the change
belongs in the MAUI project, not in this stylesheet. */
/* ============================================================================
8. SAFETY-CRITICAL UI
Crisis support is the one control in this product that must never be the thing
that failed. It gets rules that no theme, page or animation can override.
========================================================================== */
.crisis-fab,.crisis-link{
/* Never dimmed by a reduced-motion reset, a busy state or a disabled parent. */
opacity:1!important;
pointer-events:auto!important;
}
@media (pointer:coarse){
.crisis-fab{min-width:52px;min-height:52px} /* above the 44px floor, deliberately */
}
/* ---- Boot screen -----------------------------------------------------------------
Shown while the stored session is restored, before any page renders. Deliberately
almost nothing: a page-coloured field and one quiet mark. A spinner here would be a
promise about duration that this screen cannot make — it is usually gone in under
200ms, and a spinner that flashes for 200ms reads as a glitch. */
.boot-screen{
min-height:100vh;display:flex;align-items:center;justify-content:center;
background:var(--page);
}
@supports (height:100dvh){ .boot-screen{min-height:100dvh} }
.boot-mark{
width:34px;height:34px;border-radius:var(--r-md);
background:var(--accent);
animation:boot-pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes boot-pulse{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .boot-mark{animation:none;opacity:.8} }
/* Skeletons need a container so the wrapper does not collapse or inherit a flex context
that squashes the placeholder rows. */
.sk-wrap{display:block;width:100%}
/* ============================================================================
9. AI STATES
The AI companion, the health summary and the nudges all produce text after a
wait that is genuinely variable — a local Ollama model, Claude over the network,
or an instant rule-based fallback. A generic spinner says none of that. These
states say "something is being worked out", which is what makes a wait feel
deliberate instead of broken.
Restraint on purpose: this is a clinical product, and a reply about someone's
mental health should not arrive with a flourish. Everything here is quiet, and
every piece of it stops under prefers-reduced-motion.
========================================================================== */
/* ---- Thinking. Three dots that breathe rather than bounce — bounce reads playful,
which is wrong next to a crisis-support button. */
.ai-thinking{display:inline-flex;align-items:center;gap:5px;padding:12px 16px}
.ai-thinking i{
width:6px;height:6px;border-radius:50%;background:var(--muted);
animation:ai-breathe 1.4s var(--ease-in-out) infinite;
}
.ai-thinking i:nth-child(2){animation-delay:.18s}
.ai-thinking i:nth-child(3){animation-delay:.36s}
@keyframes ai-breathe{0%,100%{opacity:.25;transform:scale(.8)}45%{opacity:1;transform:scale(1)}}
/* ---- Streaming text. A cursor that holds while text arrives, so a pause in the
stream reads as the model still working rather than as the answer being finished. */
.ai-streaming::after{
content:"";display:inline-block;width:2px;height:1em;margin-left:2px;
background:var(--accent);vertical-align:-.15em;
animation:ai-caret 1s steps(1) infinite;
}
@keyframes ai-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* ---- Arrival. Each line fades up as it lands instead of the block appearing at once,
which is what makes a generated answer feel composed rather than pasted. */
.ai-line{animation:ai-arrive .34s var(--ease-out) both}
@keyframes ai-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ---- Working surface. While a result is being generated the panel gets a slow sheen
along its accent edge — visible enough to say "still going", quiet enough to ignore. */
.ai-result.is-generating{position:relative;overflow:hidden}
.ai-result.is-generating::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:linear-gradient(180deg,transparent,var(--accent),transparent);
animation:ai-sweep 1.8s var(--ease-in-out) infinite;
}
@keyframes ai-sweep{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
/* ---- Confidence. A generated suggestion is not a clinical judgement, and the interface
should not present the two identically. */
.ai-tag{
display:inline-flex;align-items:center;gap:5px;
font-size:11px;font-weight:600;letter-spacing:.02em;
color:var(--muted);background:var(--field);
border:1px solid var(--line);border-radius:var(--r-pill);
padding:3px 9px;
}
.ai-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* Reduced motion: the states stay, the movement goes. Someone who cannot tolerate
animation still needs to know the model is working. */
@media (prefers-reduced-motion:reduce){
.ai-thinking i{animation:none;opacity:.55}
.ai-streaming::after,.ai-result.is-generating::before{animation:none}
.ai-line{animation:none}
}
/* ============================================================================
10. DASHBOARD HIERARCHY
The patient dashboard was sixteen sections of equal weight, ordered by the sequence
in which features had shipped. "Upcoming appointments" — the reason someone opens the
page — sat thirteenth, below a mood tracker and a category browser, while four
different call-to-action buttons competed above the fold.
Reordered by how fast a thing decays: the session ahead, then anything that expires,
then the daily habit, then evergreen browsing. These styles carry that hierarchy. The
sections themselves stayed; only their weight and order changed.
========================================================================== */
/* ---- NEXT: the one card the page exists for. Everything else on the page is a plain
surface, so this earns its prominence from tint and scale rather than from more
shadow — a heavier shadow would just start an arms race with the cards below it. */
.dash-next{
display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
flex-wrap:wrap;
background:var(--accent-soft);
border:1px solid var(--line);
border-color:color-mix(in srgb,var(--accent) 18%,transparent);
border-radius:var(--r-lg);
padding:var(--s-5) var(--s-6);
margin-bottom:var(--s-5);
position:relative;overflow:hidden;
}
/* A rail rather than a full tint edge: reads as "this one" without turning the card into
a banner, which is what the three stacked banners already were. */
.dash-next::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
}
.dash-next-main{min-width:0;flex:1 1 260px}
.dash-next-eyebrow{
display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--accent);margin-bottom:var(--s-1);
}
.dash-next-title{font-size:19px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em}
.dash-next-meta{font-size:13.5px;color:var(--navy-2);margin:var(--s-1) 0 0}
.dash-next-actions{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.dash-countdown{
font-size:13.5px;font-weight:600;color:var(--navy-2);
padding:var(--s-2) var(--s-3);
background:var(--card);border-radius:var(--r-pill);
}
/* Live state. The only looping animation on the page, and only when a session is
genuinely joinable — a pulse that runs all day teaches people to ignore it. */
.dash-next.is-live{
background:var(--ok-soft);
background:color-mix(in srgb,var(--ok) 10%,var(--card));
border-color:var(--ok);
border-color:color-mix(in srgb,var(--ok) 32%,transparent);
}
.dash-next.is-live::before{background:var(--ok)}
.dash-next.is-live .dash-next-eyebrow{color:var(--ok)}
@media (prefers-reduced-motion:no-preference){
.dash-join{animation:dash-live 2.4s var(--ease-in-out) infinite}
}
@keyframes dash-live{
0%,100%{box-shadow:0 0 0 0 var(--accent-soft);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}
50%{box-shadow:0 0 0 7px transparent}
}
/* Nothing booked. Same footprint, so the page does not reflow depending on whether the
person has a session — and the space asks for the first booking instead of sitting
empty, which is the most valuable thing an empty dashboard can do. */
.dash-next-empty{
background:var(--card);
border:1px dashed var(--line);
}
.dash-next-empty::before{display:none}
.dash-next-empty .dash-next-eyebrow{color:var(--muted)}
/* ---- ATTENTION: open loops, grouped. Three separate full-width banners each shouted at
the same volume as the page; one list of rows reads as a short to-do and stops fighting
the card above it. */
.dash-attention{
background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
margin-bottom:var(--s-6);overflow:hidden;
}
.dash-todo{
display:flex;align-items:center;gap:var(--s-3);
padding:var(--s-4) var(--s-5);
border-bottom:1px solid var(--line-2);
}
.dash-todo:last-child{border-bottom:0}
.dash-todo-ico{
width:30px;height:30px;flex:0 0 auto;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--gold-soft);color:var(--gold-text);font-size:13px;
}
.dash-todo-body{flex:1;min-width:0}
.dash-todo-body b{display:block;font-size:14px;color:var(--ink);font-weight:600}
.dash-todo-body small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
/* ---- Section rhythm. Headings were only used in two places, so the page read as one
undifferentiated scroll. Consistent spacing above each is what turns a stack into
sections a person can skim past. */
.dash-section{margin:var(--s-10) 0 var(--s-4)}
.dash-section:first-of-type{margin-top:var(--s-8)}
/* ---- Quick actions and activity tiles became real