/* Roan application layer. ───────────────────────────────────────────────────────────────────────── Sits on top of modernist.css, which owns type, colour ramps, buttons, inputs and tables. This file adds only what the product needs beyond the design system: the four semantic states, the layout metrics, and the components that are specific to running a veterinary practice — presence, offline, the diary grid, the SOAP note stack and the command line. Rules from docs/design/DESIGN_RULES.md that this file exists to enforce: · a small radius (2–6px) on controls, none on rows and regions · the coat is the frame — header, rail, footer — and nothing else · 2px rules between regions, 1px between rows — softened, never dropped · exactly four semantic states, never colour alone · 34px per 15 minutes in the diary · 36px minimum hit target, nothing below 12px type The class vocabulary is documented in docs/design/COMPONENTS.md. A screen uses what is here; it does not add a rule of its own. ───────────────────────────────────────────────────────────────────────── */ :root { /* The four states on a cool sheet: the act-now red is a brick rather than a signal red, the attention amber is an ochre, the settled green is a clean bottle green with no mulberry in it so it never reads as the brand, and the information blue is a slate a step lighter than the coat so it never reads as chrome. Ink is for text and icons; fill tints rows and chips and is never used for text. Measured, ink on its own fill: act 5.40, attention 5.80, settled 5.32, info 5.68; ink on --color-bg: 6.32, 6.47, 6.15, 6.70; on --color-surface: 5.78, 5.92, 5.63, 6.13. Adding a fifth state is a design error — DESIGN_RULES.md §2. */ --state-act-ink: #9f2f20; --state-act-fill: #f8ded7; --state-attention-ink: #7d5200; --state-attention-fill:#faebcf; --state-settled-ink: #1c6b45; --state-settled-fill: #d8eedf; --state-info-ink: #2a5b8c; --state-info-fill: #dce8f4; /* The one pure white in the product: the field being typed into, on a near-white ground — DESIGN_RULES.md §3. The sheet is a shade off white so the one field that is white reads as the lit one. Text on it 17.10:1; the accent on it 8.81:1. */ --color-surface-editing: #ffffff; /* Four sizes that sit off the type scale in modernist.css, each because the product asks for something the system's ramp does not carry. They are declared rather than written into the rules so the exceptions can be counted; a fifth needs a reason of the same kind. */ --text-clinical: 14.5px; /* clinical prose — §4 sets this at 13.5–15px */ --text-dense: 12.5px; /* a diary appointment: one line inside 34px */ --text-figure: 22px; /* a headline number */ --text-name: 28px; /* a patient's name, the largest type on a screen */ /* Layout metrics, from the handoff. Named so a screen cannot quietly drift. */ --workspace-width: 248px; --workspace-compact: 64px; --workspace-surface: color-mix(in srgb, var(--color-bg) 60%, var(--color-surface)); --workspace-selected: color-mix(in srgb, var(--color-text) 8%, var(--workspace-surface)); --workspace-search-width: 560px; --rail-side-min: 284px; /* narrow side rail (history column) */ --rail-side: 296px; /* standard side rail (diary right rail, record) */ --rail-side-max: 360px; /* wide side rail (stock, group ops) */ --gutter-time: 52px; /* diary time gutter */ --slot-15: 34px; /* one 15-minute module */ --slot-hour: 68px; /* hour label block */ --hit-touch: 44px; /* handheld controls, without increasing desktop density */ --hit-min: 36px; /* minimum interactive height */ --shell-gutter: 24px; /* one alignment for page headings and work regions */ --footer-offset: calc(52px + var(--inset-bottom)); --chrome-height: 52px; /* the header, for a screen that fills the rest */ --rule-region: 2px solid var(--color-divider-strong); --rule-row: 1px solid var(--color-divider); /* Breakpoints. Two, and only two, in the whole product: a screen is either wide enough for the rails or it is a phone, and a phone is either upright or on its side. Every media query in this file quotes one of these two numbers — CSS cannot yet interpolate a custom property into a media query, so the numbers are written out and these declarations are what they must match. tests/test_responsive_shell.py holds them to it. */ --bp-wide-header: 1200px; /* below this the compact header omits the redundant area trail */ --bp-handheld: 680px; /* narrower than this: one column, no rails */ --bp-short-height: 480px; /* shorter than this: nothing sticks */ --bp-header-wrap: 950px; /* narrower than this the header takes two rows, so nothing may hang from --chrome-height */ /* The device's own edges. Installed to a home screen with viewport-fit=cover, the page runs under the notch and the home indicator; these are what the browser reports is covered, and 0 in a tab. The coat carries them: the header adds the top inset, the footer and the sticky action bar the bottom, the rail and both bars the sides when a phone is on its side. */ --inset-top: env(safe-area-inset-top, 0px); --inset-right: env(safe-area-inset-right, 0px); --inset-bottom: env(safe-area-inset-bottom, 0px); --inset-left: env(safe-area-inset-left, 0px); } /* The hidden attribute wins over any display a class sets. The browser's own [hidden] rule is weaker than a class, so a `.btn` marked hidden — the install button, the offline bar's sync button — was still drawn. */ [hidden] { display: none !important; } /* ── Type roles ────────────────────────────────────────────────────────── 12px is metadata only; clinical prose is 13.5-15px. */ .t-meta { font-size: var(--text-xs); } .t-small { font-size: var(--text-sm); } .t-label { font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); font-weight: var(--font-medium-weight); } .t-body { font-size: var(--text-md); } .t-clin { font-size: var(--text-clinical); line-height: 1.6; } .t-strong { font-weight: var(--font-strong-weight); } .t-name { font-size: var(--text-name); font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -.015em; line-height: 1.05; } /* A headline figure: mono and tabular, so a column of them lines up. */ .t-num { font-size: var(--text-figure); font-family: var(--font-mono); font-weight: var(--font-strong-weight); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; } /* Mono for a figure inside prose-sized text: a code, a batch, a time. */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .roan-wordmark { --roan-word-size: 22px; --roan-word-color: currentColor; --roan-square-color: var(--color-accent); display: inline-flex; align-items: baseline; gap: calc(var(--roan-word-size) * .1); min-width: 0; color: var(--roan-word-color); line-height: 1; text-decoration: none; } .roan-wordmark__text { font-family: Archivo, "Arial Black", var(--font-heading); font-size: var(--roan-word-size); font-weight: 800; letter-spacing: -.055em; line-height: .72; } .roan-wordmark__period { width: calc(var(--roan-word-size) * .12); height: calc(var(--roan-word-size) * .12); flex: 0 0 auto; background: var(--roan-square-color); transform: translateY(-.01em); } /* Prose that keeps its own line breaks: a history summary, a note version, a rationale typed with paragraphs. Wraps; never scrolls. */ .t-prewrap { white-space: pre-wrap; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── State on the system's controls ────────────────────────────────────── The one dangerous button, and the field that is wrong. Both are states, so they are declared here rather than in the system sheet. */ .btn-danger { color: var(--state-act-ink); border-color: var(--state-act-ink); background: var(--color-bg); } .btn-danger:hover { background: var(--state-act-fill); } .btn-danger:active { background: color-mix(in srgb, var(--state-act-ink) 22%, transparent); } .field__error { color: var(--state-act-ink); } .input[aria-invalid="true"], .field[data-invalid="true"] .input { border-color: var(--state-act-ink); } .field[data-invalid="true"] > label { color: var(--state-act-ink); } /* The field being typed into is the only white surface on the screen and carries the accent bar: where you are is the brand, not a state. The next one to fill is dashed. */ .input:focus-visible, .field[data-status="editing"] .input { background: var(--color-surface-editing); } .field[data-status="editing"] .input { border-color: var(--color-accent); box-shadow: inset 3px 0 0 var(--color-accent); } .field[data-status="editing"] > label { color: var(--color-accent); } .field[data-status="next"] .input { border-style: dashed; } /* ── State chips ───────────────────────────────────────────────────────── Every chip carries a word. The data-state attribute only tints it. */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium-weight); white-space: nowrap; /* labels must not wrap — §5 */ line-height: 1.35; border-radius: var(--radius-sm); background: var(--color-neutral-200); color: var(--color-neutral-900); text-decoration: none; } .chip svg { width: 13px; height: 13px; flex: none; } .chip--outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--color-muted); } /* A chip that is a filter: pressed means chosen. Not a state — a chosen filter is not urgent — so it takes the accent wash, never a state fill. */ a.chip, button.chip { cursor: pointer; min-height: 26px; } .chip[aria-pressed="true"] { background: var(--wash-accent); color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } a.chip:hover, button.chip:hover { box-shadow: inset 0 0 0 1px var(--color-divider-strong); } .chip[data-state="act"] { background: var(--state-act-fill); color: var(--state-act-ink); } .chip[data-state="attention"] { background: var(--state-attention-fill); color: var(--state-attention-ink); } .chip[data-state="settled"] { background: var(--state-settled-fill); color: var(--state-settled-ink); } .chip[data-state="info"] { background: var(--state-info-fill); color: var(--state-info-ink); } tr[data-state="act"] > td { background: var(--state-act-fill); } tr[data-state="attention"] > td { background: var(--state-attention-fill); } tr[data-state="settled"] > td { background: var(--state-settled-fill); } tr[data-state="info"] > td { background: var(--state-info-fill); } /* Today's row on a record is not urgent; it is where you are. Accent wash. */ tr[data-today="true"] > td { background: var(--wash-accent); } /* A chip sitting on the fill of its own state would vanish into it. */ tr[data-state] .chip[data-state], [data-state] > .chip[data-state] { box-shadow: inset 0 0 0 1px currentColor; } /* A list of things needing attention: count, what, state. A list rather than a table, because on a phone the three parts wrap instead of scrolling and the count stays beside the state. */ .attention-list { margin: 0; padding: 0; list-style: none; } .attention-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3-5); border-bottom: var(--rule-row); } .attention-row[data-state="act"] { background: var(--state-act-fill); } .attention-row[data-state="attention"] { background: var(--state-attention-fill); } .attention-row__count { flex: 0 0 2.5rem; } .attention-row__count[data-empty="true"] { color: var(--color-muted-softer); } .attention-row__main { flex: 1 1 200px; min-width: 0; } .attention-row .chip { margin-left: auto; } /* An alert banner that is read and worked around, not acknowledged. The title and the word share a line; the detail takes the next. */ .alert-row { display: flex; align-items: baseline; gap: var(--space-1) var(--space-2-5); flex-wrap: wrap; padding: 7px var(--space-3-5); border-bottom: var(--rule-row); background: var(--color-surface); } .alert-row[data-state="act"] { background: var(--state-act-fill); } .alert-row[data-state="attention"] { background: var(--state-attention-fill); } .alert-row[data-state="info"] { background: var(--state-info-fill); } .alert-row__title { font-size: var(--text-md); font-weight: var(--font-strong-weight); } .alert-row__detail { flex: 1 1 100%; margin: 0; font-size: var(--text-sm); } .alert-row__meta { margin-left: auto; } /* An alert that gates the screen: nothing below it renders until a named person says they have read it. Always act-now, always with its button. */ .alert-gate__row { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-3-5); border-bottom: var(--rule-region); border-left: 3px solid var(--state-act-ink); background: var(--state-act-fill); color: var(--state-act-ink); } .alert-gate__main { flex: 1 1 240px; min-width: 0; } .alert-gate__title { font-size: var(--text-md); font-weight: var(--font-strong-weight); } .alert-gate__row form { flex: none; } .alert-gate__note { padding: var(--space-2) var(--space-3-5); margin: 0; } /* ── Offline ────────────────────────────────────────────────────────────── The single most important piece of state in the product. Not dismissible, states the count, and says what will happen. "Did that save?" is the question that makes people stop trusting a practice system. */ .app-header { position: sticky; top: 0; z-index: 60; background: var(--color-coat); padding: var(--inset-top) var(--inset-right) 0 var(--inset-left); } .offline-bar { display: none; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; min-height: var(--hit-min); padding: var(--space-1-5) var(--space-3-5); font-size: var(--text-sm); font-weight: var(--font-strong-weight); border-bottom: var(--rule-region); background: var(--state-attention-fill); color: var(--state-attention-ink); } body[data-connection="offline"] .offline-bar, body[data-connection="syncing"] .offline-bar { display: flex; } body[data-connection="syncing"] .offline-bar { background: var(--state-info-fill); color: var(--state-info-ink); } /* A new release is installed and waiting. The bar shows so the person can choose the moment to reload; connection.js adds the line and the button. */ body[data-update="ready"] .offline-bar { display: flex; } body[data-update="ready"][data-connection="online"] .offline-bar { background: var(--state-info-fill); color: var(--state-info-ink); } body[data-update="ready"][data-connection="online"] .offline-bar > [data-offline-message] { display: none; } /* .btn sets its own display, which would beat the hidden attribute on the sync button the moment the bar shows while online. */ .offline-bar > [hidden] { display: none; } .offline-bar__dot { width: 8px; height: 8px; flex: none; background: currentColor; border-radius: 50%; animation: roan-pulse 1.8s ease-in-out infinite; } @keyframes roan-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } } @media (prefers-reduced-motion: reduce) { .offline-bar__dot { animation: none } } /* A field whose value has not reached the server yet. Subtle, permanent until it syncs, and never a spinner — a spinner implies something is happening. */ [data-unsynced="true"] { box-shadow: inset 3px 0 0 var(--state-attention-ink); } /* ── Presence ───────────────────────────────────────────────────────────── Ambient awareness first, blocking second. Avatars say who is here; the lock banner says who is holding the pen and offers a way to take it. */ .presence { display: inline-flex; align-items: center; } .presence__avatar { width: 26px; height: 26px; margin-left: -6px; display: grid; place-items: center; font-size: var(--text-3xs); font-weight: var(--font-heading-weight); color: var(--color-bg); background: var(--color-neutral-700); border-radius: 50%; outline: 2px solid var(--color-bg); } .presence__avatar:first-child { margin-left: 0; } .presence__avatar[data-intent="editing"] { outline-color: var(--state-info-ink); } .presence__avatar[data-offline="true"] { opacity: .45; filter: grayscale(1); } .presence-block__names { margin: 0; } .lock-banner { display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; min-height: var(--hit-min); padding: 7px var(--space-3-5); font-size: var(--text-sm); background: var(--state-info-fill); color: var(--state-info-ink); border-left: 3px solid var(--state-info-ink); border-bottom: var(--rule-row); } .lock-banner[data-severity="blocked"] { background: var(--state-attention-fill); color: var(--state-attention-ink); border-left-color: var(--state-attention-ink); } .lock-banner__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } /* A section someone else holds. Read-only, visibly so, never silently. */ [data-locked="true"] :is(input, textarea, select, button:not([data-lock-action])) { pointer-events: none; opacity: .55; } /* ── Layout shells ──────────────────────────────────────────────────────── Three navigation models: icon rail (most screens), no rail (consult, the sign-in), horizontal tabs (group operations). */ /* The page is a column: coat, sheet, coat. The sheet takes the spare height, so on a short page (sign-in, an empty listing) the footer's coat sits along the bottom of the window rather than a third of the way up, and a screen that fills its shell still fills it. */ /* 100dvh is the height the page really has once a phone's browser chrome has slid away; 100vh is the line before it for a browser without it. */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } html { scroll-padding-bottom: var(--footer-offset); } .roan-main { flex: 1 0 auto; display: flex; flex-direction: column; } .roan-main > * { flex: 0 0 auto; } .roan-main > .shell { flex: 1 0 auto; } .shell { display: grid; min-height: calc(100vh - var(--chrome-height) * 2); min-height: calc(100dvh - var(--chrome-height) * 2); } .shell--plain { grid-template-columns: 1fr; } /* The screen's top bar: title (with its context), the search, the actions, and one primary action. */ .topbar { display: flex; align-items: center; gap: var(--space-3); /* The bar wraps as a row of whole parts rather than squeezing any one of them: a title does not fold under itself, a section switcher does not break into two rows, and the primary action stays beside the others. When a long title and the switcher cannot share the line, the switcher and what follows it take the next one. A part wider than the whole line (the switcher on a phone) still shrinks and wraps inside itself. */ flex-wrap: wrap; min-height: calc(var(--hit-min) + var(--space-6)); padding: var(--space-3) var(--shell-gutter); border-bottom: var(--rule-row); background: var(--color-bg); } .topbar__heading { display: flex; flex-direction: column; min-width: 0; } .topbar__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-2xl); letter-spacing: -.015em; margin: 0; } .topbar__search { flex: 1; min-width: 0; max-width: 640px; } .topbar__meta { font-size: var(--text-sm); color: var(--color-muted-soft); } .topbar__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; } .topbar .btn { white-space: nowrap; } .topbar .nav-context { color: inherit; text-decoration: none; } .date-stepper { display: flex; gap: 0; } .date-stepper > * + * { border-left: 0; } .date-stepper > :first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); } .date-stepper > :last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; } .date-stepper__date { border-radius: 0; cursor: default; font-variant-numeric: tabular-nums; } /* ── The chrome ─────────────────────────────────────────────────────────── The top bar is the coat. The customer's identity leads: monogram in the brand mulberry, practice name, site. Roan is the small mark in the account corner and the line in the footer — §7. Everything written on the coat is --color-coat-text or --color-coat-soft; the only colour on it is the monogram and the current section's underline. */ .nav { background: var(--color-coat); color: var(--color-coat-text); border-bottom: 0; padding: var(--space-2) var(--space-3-5); min-height: var(--chrome-height); } .nav a, .nav a:hover { color: inherit; text-decoration: none; } .nav :focus-visible { outline-color: var(--color-coat-text); } .nav-brand { display: flex; align-items: center; gap: var(--space-2-5); text-decoration: none; } .nav-monogram { display: grid; place-items: center; width: 32px; height: 32px; flex: none; background: var(--color-accent); color: var(--color-coat-text); font-weight: var(--font-heading-weight); font-size: var(--text-sm); letter-spacing: .02em; border-radius: var(--radius-md); } /* Where you are working. On the sheet (a screen's own top bar) it is ruled and muted in the sheet's ink; on the coat, in the coat's. */ .nav-context { display: flex; flex-direction: column; justify-content: center; min-height: var(--hit-min); padding: var(--space-0-5) var(--space-2-5); border-left: var(--rule-row); } .nav-context__label { font-size: var(--text-3xs); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted-soft); } .nav-context__value { font-weight: var(--font-strong-weight); white-space: nowrap; } .nav .nav-context { border-left: 1px solid var(--color-coat-divider); } .nav .nav-context__label { color: var(--color-coat-soft); } .nav .nav-context .text-muted { color: var(--color-coat-soft); } .nav-account { display: flex; align-items: center; gap: var(--space-2-5); margin-left: auto; } .nav-account__who { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; min-height: var(--hit-min); text-decoration: none; align-items: flex-end; text-align: right; } .nav-account__name { font-weight: var(--font-strong-weight); font-size: var(--text-md); } .nav-account form { display: inline; } /* The account corner folded behind the person's initials, for a phone. A native details: no script, a real disclosure for the reader, and the toggle is the mirror of the monogram at the other end of the band — a coat-ruled square with the person's initials where the practice's square holds the practice's. Not drawn at all at a desk; the handheld block turns it on as `display: contents`, so the toggle sits in the band as a flex item of its own and the body takes the next row of the coat. Open, it pushes the sheet down rather than covering it: nothing opens over anything (§9), and the band above it — with the site name — stays. */ .nav-menu { display: none; } .nav-menu__toggle { display: grid; place-items: center; width: var(--hit-min); height: var(--hit-min); min-height: 0; padding: 0; margin-left: auto; flex: none; border: 1px solid var(--color-coat-divider); border-radius: var(--radius-md); color: var(--color-coat-text); font-size: var(--text-sm); letter-spacing: .02em; transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); } .nav-menu__toggle::before { content: none; } .nav-menu__toggle:hover { color: var(--color-coat-text); background: var(--wash-coat); } .nav-menu[open] > .nav-menu__toggle { background: var(--color-coat-text); color: var(--color-coat); } .nav-menu__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); flex: 1 1 100%; padding: var(--space-1-5) 0 var(--space-1); border-top: 1px solid var(--color-coat-divider); } .nav-menu__who { display: flex; flex-direction: column; justify-content: center; min-height: var(--hit-min); line-height: 1.3; } .nav-menu__name { font-weight: var(--font-strong-weight); font-size: var(--text-base); } .nav-menu__practice { font-size: var(--text-sm); color: var(--color-coat-soft); } .nav-menu__link { display: inline-flex; align-items: center; min-height: var(--hit-min); font-weight: var(--font-medium-weight); color: var(--color-coat-soft); } .nav-menu__link:hover { color: var(--color-coat-text); } .nav-menu__link[aria-current="page"] { color: var(--color-coat-text); box-shadow: inset 0 -2px 0 var(--color-coat-accent); } .nav-menu__body form { display: flex; } .nav-menu__body .nav-mark { min-height: var(--hit-min); } /* A secondary button on the coat: the fleck's rule, the fleck's ink. */ .nav .btn-secondary { background: transparent; color: var(--color-coat-text); border-color: var(--color-coat-divider); } .nav .btn-secondary:hover { background: var(--wash-coat); border-color: var(--color-coat-soft); } /* The Add to Home Screen line, on the coat, at the end of the header: one sentence in the coat's quiet ink and a Hide button. Shown by install.js on iOS Safari only; a full row, so it never squeezes the account corner. */ .nav-install { display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; flex: 1 1 100%; order: 3; padding-top: var(--space-1); border-top: 1px solid var(--color-coat-divider); font-size: var(--text-sm); color: var(--color-coat-soft); } .nav-install .btn { margin-left: auto; } .nav:has(.nav-install:not([hidden])) { flex-wrap: wrap; } /* The Roan mark, once, small — 16px so the flecks read as a mark. On the coat the flecks are cut from the coat itself. */ .nav-mark { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-coat-soft); --roan-word-size: 16px; --roan-word-color: var(--color-coat-text); --roan-square-color: var(--color-coat-accent); } .nav-mark svg { width: 16px; height: 16px; display: block; } /* Before anyone has signed in there is no practice to name, so the bar carries only the mark, in the brand, and the word. */ .nav--bare .nav-brand { --roan-word-size: 24px; --roan-word-color: var(--color-coat-text); --roan-square-color: var(--color-coat-accent); } .nav--bare .nav-mark { color: var(--color-coat-accent); } .nav--bare .nav-mark svg { width: 22px; height: 22px; } .app-footer { position: sticky; bottom: 0; z-index: 20; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-height: var(--hit-touch); padding: var(--space-3) calc(var(--space-5) + var(--inset-right)) calc(var(--space-3) + var(--inset-bottom)) calc(var(--space-5) + var(--inset-left)); border-top: var(--rule-row); font-size: var(--text-xs); color: var(--color-muted); background: var(--workspace-surface); } .app-footer__identity { display: inline-flex; align-items: center; gap: var(--space-2-5); --roan-word-size: 18px; --roan-word-color: var(--color-text); --roan-square-color: var(--color-accent); } .app-footer__version { padding: var(--space-0-5) var(--space-1-5); border: var(--rule-row); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; } .app-footer__context { min-width: 0; overflow-wrap: anywhere; } .app-footer__shortcut { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; } .app-footer a { color: inherit; } .app-footer :focus-visible { outline-color: var(--color-accent); } .app-footer .kbd { color: inherit; background: var(--color-bg); border-color: var(--color-divider); } @media (max-width: 680px) { .app-footer { gap: var(--space-2) var(--space-3); } .app-footer__shortcut { display: none; } } /* A screen with no rail and one thing on it: sign-in, an error, a code. Narrow, centred, on the ground. */ .page-narrow { width: min(26rem, 100%); margin: var(--space-8) auto; padding: 0 var(--space-4); } .page-narrow--wide { width: min(38rem, 100%); } .page-narrow h1 { font-size: var(--text-2xl); margin-bottom: var(--space-1); } .page-narrow > p { margin-bottom: var(--space-4); } /* Workspaces: the main column and its rails. */ .workspace { display: grid; min-height: 0; flex: 1; } .workspace--with-rail { grid-template-columns: minmax(0, 1fr) var(--rail-side); } .workspace--wide-rail { grid-template-columns: minmax(0, 1fr) var(--rail-side-max); } .workspace--rail-left { grid-template-columns: var(--rail-side) minmax(0, 1fr); } .workspace--record { grid-template-columns: var(--rail-side) minmax(0, 1fr); } .workspace--record:has(.record-sidebar:not([open])) { grid-template-columns: 56px minmax(0, 1fr); } .workspace--consult { grid-template-columns: var(--rail-side-min) minmax(0, 1fr) 326px; } .workspace > * + * { border-left: var(--rule-region); } /* A panel is a column of the screen: a head, then a body that scrolls if it must. A lane is a panel that opened beside another on the same canvas. */ .panel { display: flex; flex-direction: column; min-width: 0; } .panel__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: var(--rule-row); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); font-weight: var(--font-medium-weight); } /* A count or a note at the end of a head, in the head's own voice but not its case: "1 of 4 open". */ .panel__count { margin-left: auto; font-size: var(--text-xs); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-muted-soft); font-variant-numeric: tabular-nums; min-width: 0; max-width: 100%; } .panel__body { overflow: auto; min-height: 0; } .panel .section + .panel__head, .panel .alert-row + .panel__head { border-top: var(--rule-region); } /* A live region that would otherwise push everything under it down: the consult's transcript. Scrolls in its own box, never the page. */ .transcript { max-height: 30vh; overflow: auto; } .panel + .panel { border-top: var(--rule-region); } .lane { display: flex; flex-direction: column; min-width: 0; } .lane__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3-5); border-bottom: var(--rule-region); } /* A region of a screen: padded, ruled underneath. --row for a row rule, --flush for none. This is what every "padding:11px 14px;border-bottom" used to be. */ .region { padding: var(--space-4) var(--shell-gutter); border-bottom: var(--rule-region); } .region--row { border-bottom: var(--rule-row); } .region--flush { border-bottom: 0; } .region--tight { padding: var(--space-2) var(--space-3-5); } /* A side column's sections: tighter, ruled by rows, a region rule where a new subject starts. The head carries a label and, at the end, a count. */ .section { padding: var(--space-2-5) var(--space-3); border-bottom: var(--rule-row); } .section--major { border-top: var(--rule-region); } .section__head { display: flex; align-items: baseline; gap: var(--space-2); } .section__head .panel__count { margin-left: auto; } .section__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-2xl); line-height: 1.1; } .record-sidebar { min-width: 0; } .record-sidebar > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--hit-min); padding: var(--space-2) var(--space-3); border-bottom: var(--rule-region); cursor: pointer; list-style: none; } .record-sidebar > summary::-webkit-details-marker { display: none; } .record-sidebar__summary > span:first-child { display: flex; flex-direction: column; min-width: 0; } .record-sidebar__summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .record-sidebar__meta { margin-left: auto; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; } .record-sidebar__toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 var(--space-2); border: var(--rule-row); border-radius: var(--radius-lg); color: var(--color-muted); font-size: var(--text-xs); } .record-sidebar__closed { display: none; } .record-sidebar:not([open]) { overflow: hidden; } .record-sidebar:not([open]) > summary { writing-mode: vertical-rl; align-items: center; justify-content: flex-start; height: 100%; padding: var(--space-3) var(--space-1); border-bottom: 0; } .record-sidebar:not([open]) .record-sidebar__summary > span:first-child, .record-sidebar:not([open]) .record-sidebar__meta { display: none; } .record-sidebar:not([open]) .record-sidebar__open { display: none; } .record-sidebar:not([open]) .record-sidebar__closed { display: inline; } .record-sidebar:not([open]) .record-sidebar__toggle { writing-mode: vertical-rl; padding: var(--space-2) 0; min-width: var(--hit-min); } .record-cta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3-5); border-bottom: var(--rule-region); background: var(--color-bg); } .record-cta__main { display: flex; flex-direction: column; min-width: min(260px, 100%); margin-right: auto; } .record-cta__main strong { font-size: var(--text-lg); line-height: 1.2; } .record-cta form { margin: 0; } .record-cta--secondary { background: var(--color-surface); border-bottom: var(--rule-row); } .record-cta--secondary .btn { min-height: 32px; } .record-cta__more[open] { flex-basis: 100%; } /* Equal cells across a band, each ruled on its right. */ /* A pet card in the household column. The active one takes the accent wash and a 3px bar; a deceased animal stays on the record at 55%. */ .pet-card[data-active="true"] { background: var(--wash-accent); box-shadow: inset 3px 0 0 var(--color-accent); } .pet-card[data-deceased="true"] { opacity: .55; } .cells { display: flex; border-bottom: var(--rule-region); } .cell { flex: 1 1 0; min-width: 0; padding: 11px var(--space-3-5); border-right: var(--rule-row); } .cell:last-child { border-right: 0; } /* Overflow is always explicit. Nothing clips silently — §5. */ .overflow-note { padding: var(--space-1-5) var(--space-2-5); font-size: var(--text-xs); border-top: var(--rule-row); color: var(--color-muted); margin: 0; } /* Figures: a strip of headline numbers, each printed with its label and a note. The number is mono and tabular, so a row of them lines up. */ .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-bottom: var(--rule-region); } .figure { padding: var(--space-3) var(--space-3-5); border-right: var(--rule-row); min-width: 0; } .figure:last-child { border-right: 0; } .figure__value { font-size: var(--text-figure); font-family: var(--font-mono); font-weight: var(--font-strong-weight); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; margin-top: var(--space-0-5); } .figure__note { font-size: var(--text-sm); color: var(--color-muted-soft); } /* The same figure on its own in a side rail: the value of a key, an approvals count. Wraps a long value rather than widening the rail. */ .rail-figure { font-family: var(--font-mono); font-size: var(--text-figure); font-weight: var(--font-strong-weight); font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; } .figure[data-state="act"] .figure__value { color: var(--state-act-ink); } .figure[data-state="attention"] .figure__value { color: var(--state-attention-ink); } .figure[data-state="settled"] .figure__value { color: var(--state-settled-ink); } .figure[data-state="info"] .figure__value { color: var(--state-info-ink); } /* An empty state says what would be here and what to do about it: a title, one sentence, one action. Centred, no tile, no card. */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); border-bottom: var(--rule-row); color: var(--color-muted); } .empty-state > strong { font-size: var(--text-lg); font-weight: var(--font-strong-weight); color: var(--color-text); } .empty-state > p, .empty-state > span { max-width: 44ch; margin: 0; font-size: var(--text-md); } .empty-state__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-1); } .empty-state .btn { margin-top: var(--space-1); } /* Before a search: what to type, with examples that are themselves searches. */ .search-guide { padding: var(--space-6) var(--space-3-5); border-bottom: var(--rule-row); max-width: 62ch; } .search-guide > strong { font-size: var(--text-lg); } .search-guide__examples { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-3); } /* Search results: one household per row. At a desk the parts sit in columns; on a phone the name takes a line and the pets the next, so nothing needs a scroll box. */ .hit-list { margin: 0; padding: 0; list-style: none; } .hit { display: grid; align-items: baseline; gap: var(--space-1) var(--space-3); grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr) auto auto; padding: var(--space-2) var(--space-3-5); border-bottom: var(--rule-row); } .hit:hover { background: var(--wash-hover); } .hit__name { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; min-width: 0; } .hit__name a { font-weight: var(--font-strong-weight); } .hit__pets, .hit__where { min-width: 0; overflow-wrap: anywhere; } .hit__where { font-size: var(--text-sm); color: var(--color-muted); } .hit__account { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); } /* A catalogue of choices (permissions, scopes, sites): as many columns as fit a side-rail width, one on a phone. Each choice is a .check with its key printed under the label. */ .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--rail-side-min), 1fr)); gap: var(--space-0-5) var(--space-3-5); } .check-grid .check { align-items: flex-start; padding-block: var(--space-1); } .check-grid .check .box { margin-top: var(--space-1); } /* A ledger: a history read as a book of entries. The reference is the first column and is set as a figure; the newest entry sits on top and carries the accent bar so "where we are" is obvious. A closing line is ruled off and strong. */ .ledger tr[data-head="true"] > td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); } .ledger__ref { font-family: var(--font-mono); font-weight: var(--font-strong-weight); font-variant-numeric: tabular-nums; white-space: nowrap; } .ledger tfoot td { border-top: var(--rule-region); font-weight: var(--font-strong-weight); } /* Any listing that closes with totals. A single closing line is ruled off from the rows with the region rule and set strong. A totals band of several lines reads as an arithmetic column: the working lines (net, VAT, benefit, paid) sit tight and quiet, and the lines that matter carry data-total — "sum" for the invoice total, "due" for the balance the client is asked for, which is also set one step larger. */ .table tfoot td { border-top: var(--rule-region); border-bottom: 0; font-weight: var(--font-strong-weight); } .table tfoot tr + tr td { border-top: 0; padding-top: 0; } .table tfoot tr:not(:only-child):not([data-total]) td { font-weight: 400; color: var(--color-muted); } .table tfoot tr[data-total] + tr td, .table tfoot tr + tr[data-total] td { border-top: var(--rule-row); padding-top: var(--space-2); } .table tfoot tr[data-total="due"] td { font-size: var(--text-lg); } /* ── Command line ───────────────────────────────────────────────────────── Primary input on every screen. Always reachable by pointer too — there is no keyboard-only action anywhere in Roan. */ .cmd { display: flex; align-items: center; gap: var(--space-2); min-height: var(--hit-min); padding: 0 var(--space-1) 0 var(--space-2-5); background: var(--color-bg); border: 1px solid var(--color-divider-strong); border-radius: var(--radius-md); transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); } .cmd:focus-within { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); background: var(--color-surface-editing); } .cmd .btn { padding-block: 0; } .cmd > svg { width: 15px; height: 15px; flex: none; color: var(--color-muted-soft); } .cmd__input { flex: 1; min-width: 0; min-height: var(--hit-min); padding: 0; font: inherit; font-size: var(--text-md); background: transparent; border: 0; outline: none; caret-color: var(--color-accent); } .cmd__input::placeholder { color: var(--color-muted-soft); } .cmd__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .cmd__hint { font-size: var(--text-2xs); letter-spacing: .04em; color: var(--color-muted-soft); } .cmd__resolved { font-weight: var(--font-strong-weight); color: var(--state-info-ink); } /* ── Diary grid ─────────────────────────────────────────────────────────── 34px per 15 minutes. A 15-minute appointment holds exactly one line of text; if the content needs two, the slot is wrong or the content is. */ .diary-screen { height: calc(100vh - var(--chrome-height)); height: calc(100dvh - var(--chrome-height)); } .diary-workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-side); min-height: 0; flex: 1; } .diary-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .diary-resource-head { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: var(--gutter-time) repeat(var(--diary-columns), minmax(180px, 1fr)); min-width: calc(var(--gutter-time) + var(--diary-columns) * 180px); border-bottom: var(--rule-region); background: var(--color-bg); } .diary-resource-head__cell { min-width: 0; padding: 7px 9px; border-left: var(--rule-row); overflow-wrap: anywhere; } .diary-resource-head__cell > span { display: block; } .diary-scroll { overflow: auto; min-height: 0; } .diary-grid { display: grid; grid-template-columns: var(--gutter-time) repeat(var(--diary-columns), minmax(180px, 1fr)); min-width: calc(var(--gutter-time) + var(--diary-columns) * 180px); } .diary-gutter { height: var(--diary-height); } /* The time gutter is figures, so it is mono. */ .diary-gutter__label { height: var(--slot-hour); padding: 3px 7px 0 0; text-align: right; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-muted); } .diary-column { position: relative; border-left: var(--rule-row); height: var(--diary-height); } /* Each half hour is ruled; the quarter inside it is dotted, so a 15-minute slot can be found without counting pixels. */ .diary-half-hour { height: var(--slot-hour); border-bottom: var(--rule-row); background: linear-gradient(to right, var(--color-divider) 50%, transparent 50%) 0 50% / 6px 1px repeat-x; } .diary-column .appt { left: calc((100% * var(--overlap-index, 0) / var(--overlap-count, 1)) + 2px); right: auto; width: calc((100% / var(--overlap-count, 1)) - 4px); text-decoration: none; color: inherit; } .appt > span:not(.appt__chips) { display: block; margin-top: var(--space-0-5); } .appt__chips { display: flex; gap: 3px; margin-top: var(--space-1); } .appt--blocked { background: repeating-linear-gradient(135deg, var(--color-surface) 0 6px, transparent 6px 12px); } .diary-now { position: absolute; left: 0; right: 0; z-index: 4; border-top: 3px solid var(--state-act-ink); pointer-events: none; } .diary-now::before { content: ""; position: absolute; left: -3px; top: -4px; width: 6px; height: 6px; background: var(--state-act-ink); } .diary-now[hidden] { display: none; } .diary-now__time { position: absolute; left: 0; bottom: 3px; padding: 1px 5px; background: var(--state-act-ink); color: var(--color-bg); font-size: var(--text-2xs); line-height: 16px; font-variant-numeric: tabular-nums; } .diary-now__time:empty { display: none; } .diary-side { min-height: 0; overflow: auto; border-left: var(--rule-region); } .diary-side__row { padding: var(--space-2) var(--space-2-5); border-bottom: var(--rule-row); } .diary-side__row[data-state="act"] { background: var(--state-act-fill); } .diary-side .panel__head + .panel__head, .diary-side__row + .panel__head { border-top: var(--rule-region); } .diary { display: grid; grid-template-columns: var(--gutter-time) repeat(var(--diary-columns, 5), 1fr); } .diary__gutter { border-right: var(--rule-region); } .diary__hour { height: var(--slot-hour); padding: var(--space-0-5) var(--space-1-5); font-size: var(--text-2xs); border-bottom: var(--rule-row); font-family: var(--font-mono); color: var(--color-muted); } .diary__column { position: relative; border-right: var(--rule-row); } .diary__slot { height: var(--slot-15); border-bottom: 1px dotted color-mix(in srgb, var(--color-text) 15%, transparent); } .appt { position: absolute; left: 2px; right: 2px; padding: var(--space-1) var(--space-1-5) var(--space-1) 9px; overflow: hidden; font-size: var(--text-dense); line-height: 1.25; background: var(--color-surface); border: 1px solid var(--color-divider-strong); border-left: 3px solid var(--color-neutral-600); border-radius: var(--radius-sm); } .appt:hover { border-color: var(--color-neutral-600); } .appt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; z-index: 2; } .appt strong { font-weight: var(--font-strong-weight); } .appt[data-state="act"] { border-left-color: var(--state-act-ink); background: var(--state-act-fill); } .appt[data-state="attention"] { border-left-color: var(--state-attention-ink); background: var(--state-attention-fill); } .appt[data-state="settled"] { border-left-color: var(--state-settled-ink); background: var(--state-settled-fill); } .appt[data-state="info"] { border-left-color: var(--state-info-ink); background: var(--state-info-fill); } .appt__name { font-weight: var(--font-strong-weight); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* Each line in a block is one line: a subtitle too long for a narrow lane is cut with an ellipsis rather than wrapping into a third line the slot has no room for. The service decides how many lines a block may carry. */ .appt > strong, .appt > span:not(.appt__chips) { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* Blocked time: 135deg stripes, 6px on 12px. */ .diary__blocked { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-text) 12%, transparent) 0 6px, transparent 6px 12px); } /* The now line. The only red on the grid unless something is genuinely urgent. */ .diary__now { position: absolute; left: 0; right: 0; height: 3px; background: var(--state-act-ink); z-index: 3; } .diary__now::before { content: ""; position: absolute; left: -6px; top: -1.5px; width: 6px; height: 6px; background: var(--state-act-ink); } /* ── SOAP note stack ────────────────────────────────────────────────────── Each section is its own field. The one being typed into is the only white surface on the screen; the next is a dashed outline; completed sections are plain. That is the whole navigation model for the consult. */ .note-field { padding: var(--space-2-5) var(--space-3); border-bottom: var(--rule-row); background: transparent; } .note-field__label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); } .note-field__input { width: 100%; min-height: var(--hit-min); padding: 0; font: inherit; font-size: var(--text-clinical); line-height: 1.6; background: transparent; border: 0; outline: none; resize: vertical; } .note-field[data-status="editing"] { background: var(--color-surface-editing); box-shadow: inset 3px 0 0 var(--color-accent); } .note-field[data-status="editing"] .note-field__label { color: var(--color-accent); } .note-field[data-status="next"] { outline: 1px dashed color-mix(in srgb, var(--color-text) 35%, transparent); outline-offset: -1px; } /* An AI suggestion. Visibly not what a human wrote, with accept and reject always present as buttons as well as keystrokes. It is a decision waiting for a named person, so it wears the attention state, never act-now: a suggestion is not an emergency. A rejected suggestion never silently reappears — that is enforced in JS, not here. */ .note-field[data-source="suggested"] { background: var(--state-attention-fill); box-shadow: inset 3px 0 0 var(--state-attention-ink); } .suggestion__controls { display: flex; align-items: center; gap: var(--space-1-5); margin-top: var(--space-1-5); font-size: var(--text-xs); color: var(--state-attention-ink); } /* ── Consequence statement ──────────────────────────────────────────────── Any primary action that fans out says what it will do, in words, beside the button. Not a tooltip, not a confirmation dialog. */ .action-bar { display: flex; align-items: center; gap: var(--space-3-5); flex-wrap: wrap; padding: var(--space-2-5) var(--space-3-5); border-top: var(--rule-region); background: var(--color-surface); font-size: var(--text-sm); } .action-bar--plain { background: transparent; padding-inline: 0; } .action-bar__consequence { font-size: var(--text-dense); color: var(--color-muted-strong); } .action-bar__spacer { margin-left: auto; } /* "On payment, Roan will…": a plain list of what the primary action does, when one sentence would not hold it. */ .consequence-list { margin: var(--space-1) 0 0; padding-left: var(--space-4); font-size: var(--text-sm); color: var(--color-muted-strong); } .consequence-list li + li { margin-top: var(--space-0-5); } /* ── Tender pad ─────────────────────────────────────────────────────────── The ways to pay on the checkout: a 2×2 grid, the chosen one filled with the accent (selected is not urgent — DESIGN_RULES §2). Works as radios; the native input is kept for the keyboard and the reader. */ .tender-pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: var(--rule-row); } .tender { position: relative; display: flex; flex-direction: column; gap: var(--space-0-5); min-height: var(--hit-min); padding: var(--space-2-5) var(--space-3); cursor: pointer; border-right: var(--rule-row); border-bottom: var(--rule-row); font-size: var(--text-md); } .tender:nth-child(2n) { border-right: 0; } .tender input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .tender:hover { background: var(--wash-hover); } .tender:has(input:checked) { background: var(--color-accent); color: var(--color-bg); } .tender:has(input:checked) .t-meta { color: inherit; } .tender:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* ── Meters ─────────────────────────────────────────────────────────────── Capacity, plan usage, stock. The number is always printed — the grid must read with colour removed entirely (§2). */ .meter { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1-5); align-items: center; } .meter__track { height: 8px; background: var(--color-neutral-300); border-radius: var(--radius-sm); overflow: hidden; } .meter__fill { height: 100%; background: var(--state-settled-ink); } .meter__fill[data-state="attention"] { background: var(--state-attention-ink); } .meter__fill[data-state="act"] { background: var(--state-act-ink); } .meter__fill[data-state="info"] { background: var(--state-info-ink); } .meter__value { font-size: var(--text-xs); font-weight: var(--font-strong-weight); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Heatmap cell: colour tints, the number carries the meaning. */ .heat { display: grid; place-items: center; min-height: var(--hit-min); font-size: var(--text-sm); font-weight: var(--font-strong-weight); font-variant-numeric: tabular-nums; font-family: var(--font-mono); border-right: var(--rule-row); border-bottom: var(--rule-row); } .heat[data-state="act"] { background: var(--state-act-fill); color: var(--state-act-ink); } .heat[data-state="attention"] { background: var(--state-attention-fill); color: var(--state-attention-ink); } .heat[data-state="settled"] { background: var(--state-settled-fill); color: var(--state-settled-ink); } .heat[data-state="info"] { background: var(--state-info-fill); color: var(--state-info-ink); } /* ── Laboratory results ─────────────────────────────────────────────────── Flags must survive greyscale printing and a colour-blind reader. */ .flag { font-weight: var(--font-heading-weight); font-family: var(--font-mono); } .flag[data-flag="H"] { color: var(--state-act-ink); } .flag[data-flag="L"] { color: var(--state-info-ink); } .flag[data-flag="HH"] { color: var(--state-act-ink); } .flag[data-flag="LL"] { color: var(--state-info-ink); } .flag[data-flag="HH"]::after, .flag[data-flag="LL"]::after { content: " ✱"; } /* Radiograph and cytology placeholders, per §8. */ .image-placeholder { display: grid; place-items: center; min-height: 64px; font-family: var(--font-mono); font-size: var(--text-3xs); color: var(--color-muted); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-text) 10%, transparent) 0 4px, transparent 4px 8px); } /* ── Flashes ────────────────────────────────────────────────────────────── Inline, in the flow, never floating over content. One canvas — §9. */ .flashes { display: flex; flex-direction: column; } .flash { display: flex; align-items: baseline; gap: var(--space-2-5); flex-wrap: wrap; padding: var(--space-2) var(--space-3-5); font-size: var(--text-md); border-bottom: var(--rule-row); border-left: 3px solid var(--color-neutral-600); background: var(--color-surface); } .flash[data-state="act"] { background: var(--state-act-fill); color: var(--state-act-ink); border-left-color: var(--state-act-ink); } .flash[data-state="attention"] { background: var(--state-attention-fill); color: var(--state-attention-ink); border-left-color: var(--state-attention-ink); } .flash[data-state="settled"] { background: var(--state-settled-fill); color: var(--state-settled-ink); border-left-color: var(--state-settled-ink); } .flash[data-state="info"] { background: var(--state-info-fill); color: var(--state-info-ink); border-left-color: var(--state-info-ink); } .flash__word { font-weight: var(--font-strong-weight); flex: none; } .flash .btn { margin-left: auto; } /* ── The patient band ───────────────────────────────────────────────────── Everything a clinician must know before touching the animal, on one line of the screen: identity, owner, the clinical alert, why they are here, what is outstanding. */ .band { display: flex; padding: 11px var(--space-3-5); gap: 0; border-bottom: var(--rule-region); } .band__cell { padding: 0 var(--space-4-5); border-right: var(--rule-row); min-width: 0; } .band__cell:first-child { padding-left: 0; } .band__cell:last-child { border-right: 0; padding-right: 0; } .band__cell--identity { flex: 1 1 auto; } .band__cell--owner { width: 190px; flex: none; } .band__cell--alerts { width: 230px; flex: none; } .band__cell--presenting { width: 220px; flex: none; } .band__cell--outstanding { width: 236px; flex: none; margin-left: auto; border-right: 0; padding-right: 0; } .band__lead { font-size: var(--text-md); font-weight: var(--font-strong-weight); margin-top: var(--space-1); } .band__lead a { color: inherit; } .band__alert { font-size: var(--text-md); font-weight: var(--font-strong-weight); margin-top: var(--space-1); color: var(--state-act-ink); } .band__chips { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; } .band__list { font-size: var(--text-sm); margin-top: var(--space-1); line-height: 1.5; } .band__list b[data-state="act"] { color: var(--state-act-ink); } /* ── The ward ───────────────────────────────────────────────────────────── Two surfaces, and they are not the same job. The ward screens are worked on a phone in a corridor with one hand and a lead in the other, so the sheet collapses from a table into stacked rows below 680px: a table with five columns on a 390px screen is either unreadable or a horizontal scroll, and a nurse will not scroll sideways to find the button that says a drug was given. The `data-label` attributes in the markup carry the column headings into that stacked form. The whiteboard is the opposite: read at three metres, never touched. It is the only place in Roan that sets a type size by hand. */ .ward-heading { display: flex; align-items: baseline; gap: var(--space-2-5); flex-wrap: wrap; padding: 9px var(--space-3-5); border-bottom: var(--rule-row); } .ward-strip { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3-5); border-bottom: var(--rule-row); } .ward-strip[data-state="blocked"] { background: var(--state-act-fill); } .ward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); border-bottom: var(--rule-region); } .ward-cell { display: flex; flex-direction: column; gap: var(--space-1); min-height: 96px; padding: var(--space-2-5) var(--space-3); border-right: var(--rule-row); border-bottom: var(--rule-row); } .ward-cell[data-state="blocked"] { background: var(--state-act-fill); } .ward-cell[data-state="settled"] { background: var(--state-settled-fill); } .ward-cell__head { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; } .ward-cell__chips { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: auto; } .ward-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; } .ward-actions .btn { min-height: var(--hit-min); } .ward-form select, .ward-form input, .ward-form textarea { min-height: var(--hit-min); width: 100%; } .whiteboard { padding: var(--space-4-5) var(--space-5-5); } .whiteboard__head { display: flex; align-items: baseline; gap: var(--space-3-5); flex-wrap: wrap; padding-bottom: var(--space-3); border-bottom: var(--rule-region); } /* The cards are ruled, not gapped over a painted ground: a last row with fewer cards than columns would otherwise show the ground as a grey block. */ .whiteboard__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: var(--space-3-5); border-left: var(--rule-row); border-top: var(--rule-row); } .whiteboard__card { display: flex; flex-direction: column; gap: var(--space-1-5); align-items: flex-start; padding: var(--space-3-5) var(--space-4); background: var(--color-bg); font-size: var(--text-lg); border-right: var(--rule-row); border-bottom: var(--rule-row); } .whiteboard__card[data-state="blocked"] { background: var(--state-act-fill); } /* The card's fill follows its state, and the state's word is always in the chip on the card: overdue, due soon, expected. Settled cards stay on the ground so the ones that need somebody stand out. */ .whiteboard__card[data-state="act"] { background: var(--state-act-fill); } .whiteboard__card[data-state="attention"] { background: var(--state-attention-fill); } .whiteboard__card[data-state="info"] { background: var(--state-info-fill); } .whiteboard__card-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .whiteboard__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-0-5) var(--space-2-5); margin: 0; } .whiteboard__facts dt { font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; } .whiteboard__facts dd { margin: 0; } /* Plans, as cards in a ruled grid. */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .plan-card { border-right: var(--rule-region); border-bottom: var(--rule-region); } .plan-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3-5); border-bottom: var(--rule-row); } .plan-card__head h2 { margin: var(--space-0-5) 0 0; font-size: var(--text-2xl); } .plan-card__summary { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 9px var(--space-3-5); border-bottom: var(--rule-row); font-size: var(--text-sm); } .plan-card > p { padding: var(--space-2-5) var(--space-3-5); border-bottom: var(--rule-row); } @media (max-width: 680px) { .ward-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ward-table, .ward-table tbody, .ward-table tr, .ward-table td { display: block; width: auto; } .ward-table tr { padding: var(--space-1-5) 0; border-bottom: var(--rule-row); } .ward-table td { display: flex; gap: var(--space-2-5); border: 0; padding: var(--space-1) var(--space-3-5); } .ward-table td::before { content: attr(data-label); flex: 0 0 34%; font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; } .ward-table td:empty { display: none; } .ward-actions .btn { flex: 1 1 auto; } } /* ── Tasks ──────────────────────────────────────────────────────────────── A stack, not a table. This list is read on a phone at the kennel door as often as at a desk, and a six-column table at 390px is a horizontal scrollbar with a to-do list hidden inside it. Priority tints the left edge and the chip prints the word, so the list reads with colour removed — §2. */ .task-figures { display: grid; grid-template-columns: repeat(4, 1fr); } .task-figures__cell { padding: var(--space-3-5); border-right: var(--rule-row); border-bottom: var(--rule-region); } .task-filters { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; padding: var(--space-2) var(--space-2-5); border-bottom: var(--rule-region); } .task-filters__spacer { margin-left: auto; } .task-filters__form { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; min-width: 0; } .task-filters__search { flex: 1 1 12rem; min-width: 0; width: 12rem; max-width: 100%; } @media (max-width: 680px) { .task-filters__search { flex-basis: 100%; width: 100%; } } .task-list { margin: 0; padding: 0; list-style: none; } .task-row { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2-5) var(--space-3-5); border-bottom: var(--rule-row); border-left: 3px solid var(--color-neutral-600); } .task-row[data-state="act"] { border-left-color: var(--state-act-ink); } .task-row[data-state="attention"] { border-left-color: var(--state-attention-ink); } .task-row[data-state="info"] { border-left-color: var(--state-info-ink); } .task-row__main { flex: 1 1 260px; min-width: 0; } .task-row__title { font-size: var(--text-base); font-weight: var(--font-strong-weight); overflow-wrap: anywhere; } .task-row__meta { display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; margin-top: 5px; } .task-row__actions { display: flex; gap: var(--space-1-5); flex-wrap: wrap; margin-left: auto; } /* The tick that puts a row into the bulk form. Native checkbox, thumb-sized target. */ .task-row__tick { display: flex; align-items: center; min-height: var(--hit-min); flex: none; } .task-row__tick input { width: 18px; height: 18px; margin: 0; } /* Reassign and cancel are folded under "More": the rare actions, kept off the row so Done stays the one obvious button. */ .task-row__more { flex: 1 1 100%; } .task-row__more-body { display: flex; flex-direction: column; gap: var(--space-1-5); padding-top: var(--space-1); } .task-row__inline { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; } .task-row__inline .input { flex: 1 1 180px; min-width: 0; } /* ── The shell on a handheld ────────────────────────────────────────────── The shared chrome only: the header, the navigation and the layout grids every screen sits in. Individual screens carry their own narrow rules in their own sections above. The rule the whole block serves: at 320px — the narrowest phone anyone still brings to work — the page reflows and nothing scrolls sideways. A fixed rail beside a fluid column does not reflow, it overhangs, so every grid that names a rail width collapses to a single column here and the rule that separated them turns from a left edge into a top one. */ @media (max-width: 680px) { /* The header is one band, about a thumb tall: the monogram, the site and the person's initials. The practice name and the "Working at" label are still in the markup and still read aloud, but not drawn — the monogram carries the identity, the site name carries the place, and the two were costing a row each on a screen five rows tall. The account corner and the section links fold behind the initials (`.nav-menu`); the site name stays in the band because a menu that has to be opened is a menu that hides where you are, and where you are is the one thing the coat must always say. The band still wraps if it must (the iOS install line takes a row of its own), and it never scrolls sideways. */ .nav { flex-wrap: wrap; gap: var(--space-1-5) var(--space-3); padding: var(--space-1-5) var(--space-3); min-height: var(--hit-min); } .nav-brand { margin-right: 0; flex: none; } .nav-brand__name, .nav-context__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav-context { flex: 1 1 auto; min-width: 0; padding-inline: 0; border-left: 0; } /* The one place a label may wrap (§5 forbids it in chips and cells): the site name is what stops someone believing they are at another branch, so it wraps rather than being cut or pushing the row sideways. */ .nav-context__value { white-space: normal; font-size: var(--text-base); } .nav-account { display: none; } .nav-menu { display: contents; } .nav-menu__toggle { order: 1; } .nav-menu__body { order: 2; } /* Newer engines box the details' content in a ::details-content pseudo- element, and that box is the flex item, not the body inside it. It takes the body's place in the row order and its full-width share. Its own rule, so an engine without the pseudo-element drops this line and nothing else: there the body itself is the flex item and the rules above hold. */ .nav-menu::details-content { display: block; flex: 1 1 100%; order: 2; } /* Closed, that box would still claim a row of its own and the row gap with it; it has nothing to show, so it takes no row. */ .nav-menu:not([open])::details-content { display: none; } /* Rails. Every one of them is a fixed pixel column beside a fluid one. */ .workspace--with-rail, .workspace--wide-rail, .workspace--rail-left, .workspace--record, .workspace--consult, .diary-workspace { grid-template-columns: minmax(0, 1fr); } .workspace > * + * { border-left: 0; border-top: var(--rule-region); } .diary-side { border-left: 0; border-top: var(--rule-region); margin-top: var(--space-2); } /* Screens that still write their split inline — a conversion the area teams are making — get the same collapse, with the weight it takes to beat an inline declaration. */ .workspace[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } /* Figure strips written inline as three or four equal columns. */ [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Grids whose minimum track is wider than the viewport. auto-fit does not save them: below the minimum the track keeps its width and overhangs. */ .plan-grid { grid-template-columns: minmax(0, 1fr); } .whiteboard__grid { grid-template-columns: minmax(0, 1fr); } .check-grid { grid-template-columns: minmax(0, 1fr); } .whiteboard { padding: var(--space-3) var(--space-3-5); } .cells { flex-wrap: wrap; } .cell { flex: 1 1 100%; border-right: 0; border-bottom: var(--rule-row); } .band { flex-wrap: wrap; gap: var(--space-2-5) 0; } .band__cell { width: 100%; flex: 1 1 100%; padding-inline: 0; border-right: 0; } .band__cell--outstanding { margin-left: 0; } /* The spine's Clinical column is prose: it keeps a readable width and the listing scrolls inside its box, as every listing does. */ .spine th:nth-child(2), .spine td:nth-child(2) { min-width: 18rem; } .hit { grid-template-columns: minmax(0, 1fr) auto; } .hit__pets, .hit__where, .hit__account { grid-column: 1 / -1; } .hit__match { grid-row: 1; grid-column: 2; } /* iOS Safari zooms the page whenever a focused field's type is under 16px, and does not zoom back out when the field is blurred — so one tap on a search box leaves every screen after it at about 114%. These three are every field in the product: .input is the class the templates use, and the command line and the SOAP note carry their own. Desktop keeps --text-md; this is a browser behaviour, not a change of type scale — --text-lg is a step the ramp already had, reached for a different reason. */ .input, .cmd__input, .note-field__input { font-size: var(--text-lg); } /* Bars that assume there is room for a row. */ .topbar, .action-bar { flex-wrap: wrap; } .action-bar__spacer { margin-left: 0; } /* A search field has a minimum width of its own, so the row it shares with the title and the primary action cannot shrink to a phone: it pushed the page wide and the browser zoomed everything out to fit. The field takes a row of its own, after the title and the action. */ .topbar__search { flex: 1 1 100%; max-width: none; order: 1; } /* The primary action closes the bar: title, controls, search, then the site context and the action on one last row. */ .topbar > .btn-primary { order: 2; margin-left: auto; } .topbar .nav-context { order: 2; flex: 1 1 auto; border-left: 0; padding-left: 0; } .topbar__actions { order: 2; flex: 1 1 100%; } /* The diary grid keeps most of the screen; the waiting room and capacity follow underneath rather than squeezing it to a strip. */ .diary-screen { height: auto; } .diary-main { height: 70vh; } /* One hand, one thumb: the figures become two columns and the action drops under the task rather than squeezing the title into a column of letters. */ .task-figures { grid-template-columns: repeat(2, 1fr); } .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .figure:nth-child(2n) { border-right: 0; } .figure:nth-child(-n+2) { border-bottom: var(--rule-row); } .task-row__actions { margin-left: 0; width: 100%; } .task-row__actions form { flex: 1 1 100%; } .task-row__inline .btn { width: auto; } .task-row__actions .btn { width: 100%; } .page-narrow { margin-block: var(--space-4); } .empty-state { padding: var(--space-6) var(--space-3-5); } .record-sidebar:not([open]) > summary { writing-mode: horizontal-tb; height: auto; justify-content: space-between; padding: var(--space-2) var(--space-3); } .record-sidebar:not([open]) .record-sidebar__toggle { writing-mode: horizontal-tb; padding: 0 var(--space-2); } .record-cta > .btn, .record-cta > form, .record-cta > form .btn { width: 100%; } } /* A phone on its side has about 340px of height, and a sticky header with an offline bar above it can take a third of that. Below this the chrome scrolls away with the page: the header is navigation, and navigation is worth less than the field someone is trying to type into. */ @media (max-height: 480px) { .app-header { position: static; } } /* A finger, not a pointer. Neither breakpoint is a width: this is the input the device reports, and a touchscreen needs a target a finger can land on without hitting the one beside it. --hit-min is the one floor every control already carries, so lifting it lifts .btn, .input, .seg-opt, .check, .radio and the command line together; a listing row gets the same height through its cell padding, because a row is what a thumb taps on a phone. The desk keeps 36px: a mouse is precise, and density is the point of the desk. */ @media (pointer: coarse) { :root { --hit-min: 44px; } .table td { padding-block: var(--space-3); } .task-row { padding-block: var(--space-3); } .table td.actions .btn { margin-block: 0; } } /* ── Print ──────────────────────────────────────────────────────────────── A label, a receipt, a register page. The chrome, the rail and every control are navigation and stay on the screen; what prints is the sheet. A screen that prints wraps the printable part in .print-sheet and marks its buttons .no-print. The label templates set their own stock size. */ @media print { .app-header, .app-footer, .offline-bar, .flashes, .cmd, .topbar__actions, .topbar__search, .presence-block { display: none !important; } .roan-main { padding: 0; } body { background: none; color: var(--color-text); } .print-sheet { max-width: 100%; } .table th, .table td { border-color: var(--color-text); } tr[data-state] > td, .chip { background: none !important; box-shadow: inset 0 0 0 1px currentColor; } a { color: inherit; text-decoration: none; } @page { margin: 12mm; } } /* A label: an address, a patient, a medicine, a specimen. What prints is the sheet; the lines come sized from the label service and the sizes are steps. The template's own