/* ====================================================================== The Daclaria design system (SAAS-49). Palette: near-neutral ink, with one brand hue. Colour appears in exactly two places — the one primary action, and status. That is the whole rule, and it is what makes the freshness ladder legible: a reader never has to work out whether a coloured thing is a status or just decoration. Nothing here may introduce a third use of colour. Amended by SAAS-86 (ADR 0020): the chrome and the action are now Daclaria teal, where this file previously said "the brand is achromatic". The count did not change — one action hue, three status hues, achromatic content — only which hue the action wears, and the fact that the chrome now wears it too. See the --teal block below for the argument and its cost. Both themes are authored. The previous sheet derived its greys from `currentColor` mixes, which is how dark mode arrived without ever being designed — and how the report dropdowns ended up white-on-white. Every colour below is a chosen value in both themes. ---------------------------------------------------------------------- This :root block is the product's *only* token declaration (SAAS-52). The Operator realm has a sheet of its own — operator.css, loaded beside this one on every page of both realms — and the shape of the shared layer is that the tokens are declared here and nowhere else. operator.css names no colour of its own: no hex, no rgb(), no named colour, and no mix off `currentColor`. So there is no ink colour to change in one realm and not the other, because there is only one place either realm can be changed from. That is a rule someone can break by accident, so it is a test rather than a habit: OperatorStylesheetTests reads both files and fails if operator.css declares a token, writes a colour literal, or references a `--token` this block does not define — the last of which would otherwise render as nothing at all and be visible only to whoever next looked at the screen. The alternative considered was a third sheet, tokens.css, imported by both. Rejected: it moves rules that already depend on these tokens for no gain the test above does not already give, and this file had been rewritten three times in one day (SAAS-49, 50, 51) with two of those slices still in review. Additive was the shape with the least chance of taking the Owner realm down with it. ====================================================================== */ @font-face { /* Inter, self-hosted. Chosen over Source Sans 3 for its tabular figures and its taller x-height at the 12–13px the report tables run at. Variable, so one file carries every weight the product uses. Served from our own origin — never a CDN (SAAS-49). */ font-family: "Inter"; src: url("fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Kept: it is what makes native controls, scrollbars and the OS dropdown popup follow the page's theme rather than fight it. The tokens below are ours; this is for what we do not paint ourselves. */ color-scheme: light dark; /* Reserve the scrollbar's width, so a page that grows past the fold does not shift sideways. */ scrollbar-gutter: stable; --page: #F7F8FA; --surface: #FFFFFF; --ink: #101828; --ink-strong: #0B1120; --muted: #667085; --border: #E4E7EC; --border-strong: #D0D5DD; /* The brand carries one hue, and it is Daclaria teal (ADR 0020, SAAS-86). This amends a rule this file used to state — "the brand is achromatic" — and it is worth saying exactly what changed, because the old rule was load-bearing and the new one keeps the part that mattered. Colour is still spent on exactly two things: the one primary action, and status. Content is still achromatic, emphasis is still a wash of ink and a change of weight, and the freshness ladder still owns --ok/--warn/--bad alone. What moved is *which* hue the single action wears, not *how many* hues the product has. The rejected option had the better argument on paper: teal in the chrome only, leaving the action blue, keeps the maximum distance between the brand and a green/amber/red ladder, which is the thing the original rule warned about. Three treatments were built and compared side by side, and Darius took the third. Written down because the paper argument will be re-made by whoever reads the old rule next. The cost is measured, not assumed: teal sits at 4.95:1 against white where slate was 14.68:1 and the blue action 8.72:1. All pass AA, and the headroom above the floor is now thin enough that any future tint of either surface has to be re-measured rather than eyeballed. */ --teal: #0E7C86; --teal-deep: #0A616A; --teal-wash: #E6F4F5; /* The ink that reads on --teal-wash. It is a separate token because the two themes disagree about which end of the teal is legible on their own wash — deep on a pale tint here, lifted on a translucent one in dark. */ --nav-active-ink: var(--teal-deep); --brand: var(--teal); --on-brand: #FFFFFF; /* The single action colour. One filled button per screen, at most. */ --action: var(--teal); --on-action: #FFFFFF; --action-hover: var(--teal-deep); /* THE INK A NAME THAT OPENS A THING IS WRITTEN IN (SAAS-363) — --nav-active-ink's own move, for --nav-active-ink's own reason, one surface along: the deep end of the teal in light and the lifted end in dark, which is what `var(--teal-deep)` already means in each theme. ⚠ IT IS NOT --action, AND THAT IS MEASURED RATHER THAN CHOSEN. These are words, so the floor is 4.5:1 and not the 3:1 a non-text mark may take. Every table that draws one of these links sits on --page and washes its rows, and --action fails on four of the five backdrops that actually occur in the light theme — 4.65:1 on --page, then 4.34:1 on a hovered row, 4.39:1 down the register's sorted column, 4.38:1 on an unmeasured Branch's row and 4.17:1 when that row is hovered. The Branch name has been drawing at those figures since SAAS-51; nothing had measured it against the text floor. --teal-deep clears every one of them: 6.74 / 6.29 / 6.35 / 6.35 / 6.05 in light, 11.13 / 10.35 / 10.61 / 10.55 / 9.99 in dark. */ --row-link: var(--teal-deep); /* Status. These three belong to the freshness ladder and to stated failures, and to nothing else. */ --ok: #1A7F37; --warn: #9A6700; --bad: #B42318; /* Custom-vs-Standard report scope. Not a status — deliberately off the status hues. */ --scope-custom: #6941C6; /* A person's own pin on a report (SAAS-133) — the star on the report list, lit. Not a status either, and NOT --warn, which is the near thing it looks like: --warn measures 4.32:1 against --teal-wash, and --teal-wash is the selected row a lit star most often sits on, so reusing it would have shipped a state that fails AA in exactly the place it matters. This hue measures 5.43:1 on --surface, 5.07:1 on a hovered row and 4.81:1 on --teal-wash; the dark one is 11.71 / 10.67 / 9.12. Measured on the shipped tokens, not taken from the mock. */ --star: #B54708; /* ------------------------------------------------------------------ BRANCH IDENTITY ON THE MERGED OWN CALENDAR (SAAS-151, ADR 0020 amended). This is the one sanctioned use of colour beyond "the action, and status", and Darius took it knowingly from a rendered comparison. The reason it is worth the exception: on a doctor's merged week the clinic is what the page is scanned by, and until this slice it was carried by repeating the whole display name on every block — which ate the block before the patient's name appeared. A hue plus a short code is the smallest thing that can carry it. THE HUE IS A SCANNING AID; THE CODE IS THE IDENTITY, and the two are never shown apart. That is not a nicety — there are only three hue bands genuinely free here once teal (the action and the chrome), green/amber/red (the status ladder) and burnt orange (--star) are reserved. So the palette is three hues at two values each: six, and no more. ⚑ SIX HUES, THEN NONE — SAAS-255, ruled 2026-09-07 from a real eleven-Branch Owner's week. The palette USED TO REPEAT past six, and this comment used to say so. At eleven clinics that put five pairs of Branches in one colour, and the reader could no longer trust that two different colours meant two different clinics. It does not repeat any more: the first six Branches in Branch order keep a hue, and from the SEVENTH ON a Branch has none — its blocks, its legend entry and its agenda rows are drawn in ink (--muted, .tone-0 below) with the code alone. Twelve measured hues were rendered and rejected: every one cleared 4.5:1, but four of them were blues a reader has to tell apart at 11px bold, and a colour that only pretends to separate is worse than a grey that says it is not trying. ADR 0020's exception therefore stays exactly as narrow as SAAS-151 made it — six Branch hues past the action and the status ladder, and nothing more. MEASURED, not eyeballed, against both themes' surfaces. Light: 6.62 / 6.99 / 6.03 / 7.57 / 7.67 / 7.06 against --surface, and 6.23 / 6.58 / 5.67 / 7.12 / 7.22 / 6.64 against --page. Dark: 7.52 / 8.48 / 8.76 / 8.76 / 8.91 / 9.27 against --surface. The seventh Branch's ink is --muted, which measures 4.97:1 on light --surface and 4.68:1 on light --page, and 7.03:1 and 7.65:1 on dark's two. The floor that matters is 4.5:1, because the code is 11px text and 11px bold is not "large"; light is the constrained theme and it clears it on both grounds. The swatch and the block's own edge clear the 3:1 non-text floor several times over as a consequence. ⚠ THE LETTERS ARE THE TENANT'S, not ours (SAAS-255 ruling 1C). The code printed here is the SHORT CODE the Tenant named for the clinic — BDG, BGR, BKS — and only derived from the display names where nobody has named one. It is never the "Branch code" the New Branch form asks for: that one is the database code, `malabar21`, and no database name is ever drawn. */ --branch-1: #2E5AAC; --branch-2: #7A3E9D; --branch-3: #A83A6B; --branch-4: #3E5578; --branch-5: #5F4A78; --branch-6: #7A4A60; /* ------------------------------------------------------------------ THE CHART PALETTE (SAAS-266, ADR 0020's second addendum, built on SAAS-315). This is the THIRD use of colour this sheet's own rule admits, after the one action and the status ladder, and it is SAAS-151's shape: five categorical slots, then ink with a texture, plus a two-step ramp of one hue for every two-series chart. It was COMPUTED, not picked — docs/research/dashboard-chart-method.md carries the validator output for both themes. WHY THE SIX BRANCH HUES COULD NOT BE REUSED. They were made to be legible as 11px LABELS on two surfaces, not to be distinguishable as ADJACENT FILLS, and they fail hard as the latter: #5F4A78 against #3E5578 measures deltaE 0.7 under deuteranopia and 5.7 under full colour vision, on a pair the merged calendar shows side by side. Two Branch blocks are separated by a short code and never touch; two donut arcs touch and carry nothing but colour. WHY THE FIFTH SLOT IS A LIGHTNESS STEP RATHER THAN A FIFTH HUE. Reserving teal (the action and the chrome), green/amber/red (the ladder) and --star's burnt orange leaves a single 151 degree arc free: teal 205 -> blue -> violet -> magenta 356. Four hue families, five slots. The order that passes the validator in BOTH themes is teal, violet, magenta-light, blue, magenta-deep, and the ring's wrap pair (slot 5 touching slot 1) was measured by hand: deltaE 20.9 CVD in light, 13.7 in dark. ⚠ EVERY CHART SITS ON --surface, NEVER ON --page. On light --page #F7F8FA slot 1 falls to 2.84:1 and slot 3 to 2.88:1, both under the 3:1 mark floor, where on --surface they are 3.01 and 3.06. The headroom is one hundredth of a ratio point, which is the same thin margin the teal masthead already recorded: any future tint of either surface has to be RE-MEASURED rather than eyeballed. The .block wrapper on every panel is what keeps the promise. EVERY SLOT ON --surface, BOTH THEMES, against the 3:1 mark floor. This is the bar SAAS-356 did NOT waive, and ChartYearInkTests derives these figures off this file, so a hex edited above without editing this table fails the suite. | on --surface | light | dark | bar | | ------------ | ----- | ----- | ---- | | --chart-1 | 3.01 | 6.01 | 3.00 | | --chart-2 | 8.10 | 3.02 | 3.00 | | --chart-3 | 3.06 | 5.28 | 3.00 | | --chart-4 | 5.43 | 5.29 | 3.00 | | --chart-5 | 8.52 | 3.01 | 3.00 | ⚠ AT MOST TWO SERIES WHERE ANY MARK MAY TOUCH ANY OTHER. Under --pairs all the five-slot set fails (deltaE 5.9 deutan on #D37798 against #0BA5A9) and so does any three of them; two pass. A future scatter of clinics, or a choropleth of Jakarta, has to fold to two series, facet, or change form. Re-ordering cannot fix it. ⚑ AND THERE IS NOW ONE ACCEPTED EXCEPTION TO THAT BOUND, RULED BY DARIUS ON 2026-09-18 (SAAS-356), IN HIS WORDS: "just give color, i dont care about color blind for now". He had just read SAAS-336's chart and said "336 i see only greys, i want colors" — accurately, since it drew one teal and every prior year the same grey. So the MULTI-YEAR COMPARISON takes one of these slots per year, newest on slot 1, and draws up to five lines that may cross anywhere. On that one panel the colour-blind bar above is WAIVED. Nothing else waives it, and it is waived "for now" — his words, kept because they are the scope of the decision. ⚑ AND SINCE 2026-09-20 THE COLOUR IS NO LONGER THE WHOLE SEPARATION: the year in hand is the only SOLID line and every prior year is DASHED, which is a channel no waiver touches. See bar 3 below for the ruling and for what the dash does and does not do. ⚠ THREE BARS LIVE IN THIS BLOCK AND THE RULING MOVES EXACTLY ONE. They are three different measurements and a reader who folds them together will either re-break the chart or refuse a change Darius has already made. 1. CONTRAST AGAINST THE GROUND — NOT WAIVED. Every slot clears the 3:1 mark floor on --surface in both themes; the table two paragraphs up is the measurement, and ChartYearInkTests asserts it off this file, so a hex edited here without re-measuring fails the suite. 2. COLOUR-BLIND SEPARATION BETWEEN MARKS — WAIVED, 2026-09-18, for the comparison only. Measured the same day under --pairs all over the five slots (OKLab, Machado 2009 at severity 1.0), worst pair in each model: | worst all-pairs deltaE | light | | dark | | | ---------------------- | ----- | ---------- | ----- | ---------- | | protanopia | 6.4 | 1 v 3 | 10.8 | 1 v 3 | | deuteranopia | 5.9 | 1 v 3 | 5.2 | 1 v 3 | | tritanopia | 13.9 | 1 v 4 | 4.2 | 1 v 4 | A reader with deuteranopia cannot separate three or more year lines by hue, and in dark a reader with tritanopia cannot separate slots 1 and 4 by hue. Darius has accepted that trade. It is written here so it can be REVISITED rather than found by surprise: it is an accepted exception to the accessibility bar ADR 0020 set and SAAS-266/336 re-derived, not a repeal of it. ⚠ THE 2026-09-20 DASH NARROWS THIS WAIVER AND DOES NOT LIFT IT. The year in hand is now solid against dashed prior years, so that one pair is separable with no colour vision at all; two PRIOR years are not, and this waiver is what covers them. The figures above are the colour channel's and are left exactly as measured. 3. NORMAL-VISION SEPARATION — ⚠ UNDER THE FLOOR ON COLOUR ALONE, AND RULED ON 2026-09-20 (SAAS-356): THE PRIOR YEAR CARRIES A NON-COLOUR CHANNEL AS WELL AS ITS HUE. The validator's floor is 15. The five slots measure 12.2 in light (slot 2 #4F4591 against slot 4 #0F6AC3), and in dark 12.6 (slot 1 against slot 4) and 13.7 (slot 2 against slot 5; recomputed in OKLab 2026-10-02, unrecorded until then). ⚠ THOSE TWO FIGURES AND THAT FLOOR STAY WRITTEN HERE. They are not deleted now that the reading no longer rests on colour alone. The next person to touch these hues has to know that the colour channel is under the floor, and why that is acceptable. Darius accepted the five hues on 2026-09-19 after seeing them drawn — "356 color is ok" — and then ruled on 2026-09-20 that colour may not carry the distinction by itself: THE YEAR IN HAND DRAWS SOLID AND EVERY PRIOR YEAR DRAWS DASHED. The pattern is ChartScale.PriorYearDash, and a dash is GEOMETRY RATHER THAN INK — so it survives both themes and a monochrome printer, which is where colour is least reliable. It answers the dark 12.6, whose slot 1 is the year in hand. It does NOT answer the light 12.2 or the dark 13.7: both are two PRIOR years, dashed alike, and they rest on the 2026-09-19 acceptance of the hues alone, and Darius ruled on 2026-10-02 that prior years need NOT be told apart without colour (SAAS-356). Moving a hue would have cleared the 15, left the colour-blind concession exactly where it was, and risked the brand teal. ⚠ AND WHAT THE DASH DOES NOT DO, so nobody reads more into it than was ruled. It separates the year in hand from the prior years. It does NOT separate two prior years from each other: a dash ramp per year is the encoding the 2026-09-18 ruling refused, so three or more prior years are still told apart by hue, by vertical position and by the year each line carries at its own right-hand end. The CONVERGENCE BAND is where that costs something — on a five-year reading four of the five lines sit between roughly 500m and 620m across July and August, which is the case to look at first if this is ever revisited. ⚑ AN UNEXPLAINED GAP IN THIS BLOCK IS EXACTLY HOW THE MISTAKE SAAS-336 WAS RAISED OVER GOT IN — the old guard measured each line against the ground, the comment said nothing about neighbours, and four indistinguishable greys shipped under a green suite. So a waived bar is written down as waived. A later reader must see a decision, never an omission. Slot 1 is a teal and measures deltaE 12.2 from --action in light. Accepted knowingly: a fill and a button never touch as marks. */ --chart-1: #0BA5A9; --chart-2: #4F4591; --chart-3: #D37798; --chart-4: #0F6AC3; --chart-5: #911952; /* Everything outside the Tenant's five Category Palette slots, and the Other staff bar. It is --muted, deliberately, so it cannot be mistaken for a sixth hue — and it carries a 45 degree hatch as well, because a grey among five hues is told apart only BY its greyness. */ --chart-ink: #667085; /* The two-step ordinal ramp: Existing against New, female against male. One hue at two lightnesses, and the gap between them is measured rather than judged (SAAS-324). WHY IT MOVED. The ramp shipped as #006B74 / #00B3C2 here and #00818C / #00C1D1 in dark, which measure 2.45:1 and 2.11:1 against each other — both under the 3:1 floor WCAG 1.4.11 sets for two marks that touch, and dark was the worse of the two. Darius read Puri's 295.1 M bar on the live dashboard as one teal block with a barely distinguishable tip. The target is the example's own pair, #1F8FE6 light blue on #1B2A8C navy at 3.49:1, because clearing 3:1 by a whisker would still look like the thing he complained about. STILL ONE HUE. Every step below is hsl(184.65 …) — the ramp's own hue, unchanged. The pair moved apart in lightness and in nothing else, so ADR 0020's one-hue rule holds and no second categorical slot was spent on a distinction that is not categorical. | measured 2026-09-12 | light | dark | bar | | ------------------------------- | ----- | ----- | ---- | | deep against light | 3.65 | 3.62 | 3.00 | | deep on --surface | 12.86 | 3.56 | 3.00 | | deep on --page | 12.10 | 3.87 | 3.00 | | light on --surface | 3.53 | 12.88 | 3.00 | | light on --page | 3.32 | 14.00 | 3.00 | | --chart-step-deep-ink on deep | 12.86 | 5.09 | 4.50 | | --chart-step-light-ink on light | 5.03 | 12.62 | 4.50 | ⚠ THE SURFACE BOUNDS THIS, and it bounds it from opposite sides in the two themes: in light both steps must stay dark enough to clear #FFFFFF and the #F7F8FA page behind it, and in dark both must stay light enough to clear #14161A. That pair of walls is what made the old ramp narrow, and it is why the dark deep step sits near its own floor — every unit of lightness it gains, the light step must gain 3.6 of. Any future tint of either surface re-measures all seven rows above; ChartRampContrastTests asserts every one of them off this file, so a hex edited here without re-measuring fails the suite. */ --chart-step-deep: #00383D; --chart-step-light: #0097A3; /* THE INK A SEGMENT'S OWN LABEL IS DRAWN IN, one token per step (SAAS-325). A stacked segment prints its value inside itself, directly on that step's fill — the segment is the chip — so the ink has to clear that fill at 4.5:1, and one ink cannot clear both ends of a ramp that is 3.6:1 wide. ⚠ WHITE ON BOTH STEPS IS ARITHMETICALLY IMPOSSIBLE, which is why there are two tokens. In dark a mark must clear --surface #14161A at 3:1, which puts its relative luminance at 0.124 or above; white clears a fill at 4.5:1 only at 0.183 or below; and a pair 3.49:1 apart cannot put both ends inside that band. The example is not a counter-example — white on its own #1F8FE6 measures 3.43:1, which is the large-text bar and not this one. Both tokens are theme-invariant, so the dark block redeclares neither: the deep step is dark in both themes and the light step is light in both. A near-black label on a pale cyan fill in the dark theme is the deliberate consequence. */ --chart-step-deep-ink: #FFFFFF; --chart-step-light-ink: #101828; /* ⚑ --chart-year-now AND --chart-year-prior ARE RETIRED (SAAS-356, 2026-09-18). Retired rather than redefined onto the slots, which the ruling offered as the alternative: there is no longer a NOW colour and a PRIOR colour to name. A year is a slot, so the slot tokens above are the whole statement and a second name for slot 1 would be one more place it could drift. SAAS-339 set the precedent for retiring a chart token rather than leaving it pointing somewhere. WHAT THEY WERE, so the retirement reads as a decision. SAAS-328 ruling 5 treated years as ORDINAL and therefore not as palette slots: the year in hand in --teal (#0E7C86 light, #4FC3CE dark) and every prior year in --chart-ink (#667085 / #98A2B3). SAAS-336 amended it from a four-step grey ramp to one grey plus a dash per year, having measured that the four greys ran 1.12–1.16:1 against EACH OTHER inside a usable band 1.54:1 wide — one 3:1 step does not fit in that, let alone three. WHY THE ORDINAL READING LOST. It was sound and it was unreadable. Darius, 2026-09-18: "336 i see only greys, i want colors", then "just give color, i dont care about color blind for now". A four-year comparison drew three grey lines and one teal, which is what he was looking at. So a year is categorical now — the thing ruling 5 said it was not — and the dash patterns went with the grey they were compensating for (ChartScale.YearStroke carries the rest). ⚠ THE COLOUR-BLIND BAR THIS COSTS IS WAIVED AND WRITTEN DOWN, in the --chart-1 block above, with the measurement and the date. Two of the three bars there still hold. */ /* A gridline, the target mark, and the unfilled part of a gauge. The target is --ink because it is a REFERENCE rather than a status: a dashed line in amber would read as a warning. */ --chart-grid: #E4E7EC; --chart-target: #101828; --chart-track: #EEF0F3; /* Code (SAAS-52). The Operator realm reads and writes SQL, so a monospace stack and a surface to set it on are product-wide roles rather than Operator-only ones — `code` below already used a stack, and operator.css had grown a second one that differed by a font ("Cascadia Code" against "Cascadia Mono"), which is exactly the two-sheets-one-product problem in miniature. System stack, no webfont: 0 KB over the wire. Inter is self-hosted at ~110 KB and that is already a real cost on a filtered Indonesian connection; a second face to render SQL that only Daclaria staff ever see would be spending a clinic's bandwidth on our own tooling. A CDN is never an option here for anything. Cascadia Mono before Cascadia Code deliberately: both ship on Windows 11, and Code is the ligature cut — `<=`, `>=` and `!=` fuse into single glyphs, which is a preference in an editor and a hazard in a body of SQL somebody is auditing against a captured corpus. */ --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The surface a block of code sits on. A step down from --surface rather than up, so a code panel reads as recessed into the page — the same idiom in both themes, not the same value. */ --code-surface: #F2F4F7; --row-hover: rgba(16, 24, 40, .035); --focus-ring: color-mix(in srgb, var(--action) 55%, transparent); /* Retained so the rules written against them keep working — but now pointing at authored colours rather than at a mix of whatever text colour happened to be inherited. */ --line: var(--border); /* Prose only. There is deliberately no shell-width token: the application spans the viewport, and capping it is what put the sidebar in the middle of the screen. */ --measure: 68ch; /* The masthead band's own three values (SAAS-117): what a link's hover and current states are washed with, and what draws an outline on the band. ⚠ MEASURED, AND THE OBVIOUS ANSWER IS WRONG. The rendered comparison Darius ruled from marked the current entry with a *lighter* wash — white at 14% — which is what a coloured masthead usually does. It fails here: --brand is teal at 4.95:1 against white, so lifting the band underneath the text takes the text down with it. White on that composite measures 3.85:1, under the 4.5:1 floor, on the one entry that has to be legible. The wash therefore cuts *down* into the band rather than up out of it: white reads 6.95:1 on the current wash and 5.85:1 on hover — both better than the plain band they sit on. One pair for both themes, deliberately. They are alpha over --brand, and --brand is the token that already differs per theme — dark's #0B4E56 is darker still, and the same two values measure 10.15:1 and 9.09:1 there. Light is the constrained theme; measure there and dark follows. The line is white rather than black for the opposite reason: it outlines the account chip, which is a boundary rather than text, and 68% white clears the 3:1 non-text floor at 3.16:1 where a dark line on a mid-teal band would not. */ --masthead-hover: rgba(0, 0, 0, .10); --masthead-current: rgba(0, 0, 0, .20); --masthead-line: rgba(255, 255, 255, .68); /* ------------------------------------------------------------------ The craft layer (SAAS-86, ADR 0020). Everything above this line is a hue. Until this slice that was the *whole* token block — no spacing scale, no type scale, no radius, no elevation. Rhythm, proportion and density had therefore never been designed: every component picked its own value, and the sheet had drifted into eighteen distinct font sizes between 10.9px and 21.6px, most of them separated by less than a pixel and none of them chosen against the others. The reason that happened is legible in the tickets and worth keeping in view. SAAS-49 through SAAS-55 verified contrast ratios, alignment mismatches and scrollWidth — exactly the things a machine can count, and not one of which is proportion. No agent can sign in to this product, so the axes that got attention were the measurable ones. These four scales are the answer to that, and they are deliberately short: a closed set of steps is what makes a component's size a decision rather than a typing accident. ------------------------------------------------------------------ */ /* Space. Eight steps, each roughly 1.5x the last at the small end where the eye is most sensitive, doubling at the top where it is not. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* Type. Seven steps. --t-body is the density ruling: 14px, with a 42px table row. Roomy (15.5/48) and compact (12.5/36) were both built and refused. */ --t-micro: 11px; --t-small: 12.5px; --t-body: 14px; --t-lead: 15.5px; --t-h3: 17px; --t-h2: 21px; --t-h1: 27px; /* Radius. Three steps: controls, panels, cards. The pill (999px) and the circle (50%) are shapes rather than steps and stay written out where they are used. */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; /* Elevation. Two levels, both cheap, both tinted with the ink rather than pure black — a neutral-black shadow on a warm-neutral page reads as grime. */ --e1: 0 1px 2px rgba(16, 24, 40, .05); --e2: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 16px -6px rgba(16, 24, 40, .10); /* The table row's vertical padding, so density is changed in one place rather than in every table in the product. 10px + 10px + a 21px line box is the 42px row. The prototype paired this with a --cell-x of 24px. That step is deliberately not carried over: there the table was the page, while here every table sits inside a block that already pays its own horizontal padding, so a second 24px inside the cell would indent the first column past its own heading and widen the widest thing in the product for nothing. The columns keep --s3, and the one place a wider gutter is genuinely needed — between two adjacent right-aligned number columns — asks for it by name. */ --row-y: 10px; /* HOW FAR A LANDED ROW SITS BELOW THE TOP OF THE VIEWPORT (SAAS-170). The masthead is sticky at this width, so a browser that scrolls a row exactly to the top of the page parks it underneath the band — the same "I still have to scroll" this slice exists to remove, one screen higher up. This is the band's own height plus a gap: it is a slim one since ADR 0027, --s2 of padding either side of a ~32px account chip, and the step above that leaves the row clear of the band's edge rather than tight against it. A token rather than a literal because the narrow width says a different thing (0 — the band is not sticky there), and one number written in two places is one number that drifts. */ --landing: var(--s8); } /* The guard on this selector is what lets the page be forced back to light, and it is the whole mechanism behind the printed document's light theme (SAAS-95). `:root:not([data-theme="light"])` rather than a bare `:root`: print.js stamps `data-theme="light"` on before the browser paints a print, and removes it after. With that attribute present this block simply does not apply, so every token falls back to the light values already declared above — no second palette, no print-only colours, and nothing to keep in step across two places. A print stylesheet that re-declared the light values would be exactly the divergence SAAS-52 removed from this product. It also means a browser that honours `prefers-color-scheme` in its print output cannot put a near-black page onto white paper, which is the failure the ruling names. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #0A0B0D; --surface: #14161A; --ink: #ECEFF3; --ink-strong: #FFFFFF; --muted: #98A2B3; --border: #23262B; --border-strong: #2F343B; /* The brand hue survives into dark, and the masthead keeps it (ADR 0020, SAAS-86). --brand was #15171B here: a near-black that receded into the page. Teal is instead lifted to a deep #0B4E56 — present, but not a lightbar across a #0A0B0D page. The alternative was built and rejected, and the reason is worth recording: a brand hue that does not survive both themes makes dark mode a differently-branded product, and leaves the hue on exactly one button. The wordmark reads at 8.13:1 against it. --teal is lifted to the same relative luminance the shipped theme already used for #8FB0F5, so the one action reads with the weight it always had, with dark ink on it — the flip to dark ink is a rule this theme already had, not a new one. Dark is the *safer* theme at every point, which is the opposite of the instinct: the action clears 8:1 here against 4.95:1 in light. So light is the constrained theme. Measure every future colour decision there and dark follows for free, not the reverse. */ --teal: #4FC3CE; --teal-deep: #6BD2DB; --teal-wash: rgba(79, 195, 206, .14); --nav-active-ink: var(--teal); --brand: #0B4E56; --on-brand: #ECEFF3; --action: var(--teal); --on-action: #062024; --action-hover: var(--teal-deep); /* Lifted for contrast against a near-black page — the same three meanings, not the same three values. A 4.5:1 green on white is unreadable on #0A0B0D. */ --ok: #6BD98A; --warn: #E8B341; --bad: #F98A80; --scope-custom: #B69DF0; /* Amber rather than the light theme's burnt orange, for --ok/--warn/--bad's reason: a 4.5:1 hue on white is unreadable on #0A0B0D. Measured above. */ --star: #FEC84B; /* The Branch hues, lifted (SAAS-151). Same three bands and the same two-values-per-band system as the light theme, mirrored: where light darkens the second triad toward slate, dark desaturates it toward the same slate from above. Keeping the *structure* identical is what lets a doctor learn the key once — the second blue is the muted blue in both themes, not a different relationship. All six measure 7.5:1 or better on --surface. */ --branch-1: #7CA8F0; --branch-2: #C4A2F5; --branch-3: #E79FC4; --branch-4: #9FB6D8; --branch-5: #C0AEDC; --branch-6: #D9AEBE; /* The chart palette, lifted (SAAS-266). Slot 1 is unchanged: #0BA5A9 measures 3.01:1 on light --surface and 6.01:1 on dark's, so one teal serves both themes and the brand's presence on the dashboard does not move between them. The other four are the dark theme's own values, and all five clear 3:1 on --surface here. */ --chart-1: #0BA5A9; --chart-2: #6353BD; --chart-3: #DB6190; --chart-4: #1F8FE6; --chart-5: #924B77; --chart-ink: #98A2B3; /* The ordinal ramp, widened with the light theme's (SAAS-324) — same hue, 3.62:1 apart. The deep step sits near its own floor at 3.56:1 on --surface, deliberately: every unit of lightness it gains the light step has to gain 3.6 of, and the light step is already pale. The two label inks are declared once in :root and hold here unchanged; the measured table for both themes is beside them. */ --chart-step-deep: #007A85; --chart-step-light: #7CEAF4; /* The two ordinal YEAR tokens are retired here too (SAAS-356) — see :root for why. This theme declared them at #4FC3CE and #98A2B3; a year now wears one of the five slots above, which this theme already declares its own values for. Dark had MORE room than light for the grey ramp and it made no difference, so nothing about the retirement is theme specific. */ --chart-grid: #23262B; --chart-target: #ECEFF3; --chart-track: #1F2227; /* Still a step *down* from --surface (#14161A) on a page already at #0A0B0D. The border carries most of the panel's edge here; the fill only has to stop the code reading as loose text on the page. */ --code-surface: #101318; --row-hover: rgba(255, 255, 255, .04); /* Elevation is the one part of the craft layer that cannot carry its light values over. A 5%-ink shadow is invisible on a #0A0B0D page, so depth in dark comes from a denser black instead — the same two levels, not the same two values, which is the rule the rest of this block already follows. */ --e1: 0 1px 2px rgba(0, 0, 0, .5); --e2: 0 1px 3px rgba(0, 0, 0, .55), 0 6px 16px -6px rgba(0, 0, 0, .65); } } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--t-body); line-height: 1.5; background: var(--page); color: var(--ink); } /* --- The site frame --------------------------------------------------- */ /* The masthead (SAAS-117): one band across the top carrying the wordmark, the navigation and the account menu. It replaced a slim header over a left rail, which Darius ruled against from a rendered comparison on 2026-08-22. STICKY IN BOTH REALMS, and that is a change rather than a copy. operator.css used to make only the vendor header sticky, and said in as many words that it was sticky *because* that realm had no rail — the Owner realm's marker was the sidebar, which was already always on screen. Neither realm has a rail now, so this band is the only chrome there is, and it carries the one control that must never need scrolling to reach (SAAS-116). z-index 40 clears the day-end blocks and the report preview's sticky headings — those position against .block-scroll, their own scroll box, not against the viewport. */ .site-header { background: var(--brand); color: var(--on-brand); position: sticky; top: 0; z-index: 40; } /* The shell spans the viewport. It used to be capped at a centred 78rem, which was a mistake I made in SAAS-49: 78rem is a *document* width, and this is an application. Capping it put the navigation in the middle of the screen with dead space either side of it, and — worse — clipped the right-hand columns off the widest reports while several hundred pixels sat empty beside them. Prose is still measured. `.lead` and the report descriptions keep `--measure`, because a sentence 1900px wide is unreadable in a way a table is not. */ .masthead-inner { box-sizing: border-box; padding-inline: var(--s5); padding-block: var(--s2); display: flex; align-items: center; gap: var(--s5); /* IT IS A SLIM BAND SINCE SAAS-162 (ADR 0027). Navigation left it for the rail, so what is left is the wordmark at one end and the Tenant and account chip at the other — one row at every width the masthead was measured at. The wrap stays, and it is now insurance rather than the narrow-width answer it used to be: a long Tenant name beside a long email still has somewhere to go. The account block is last in the line and carries `margin-inline-start: auto`, so it is the half that drops when the two do not fit, which keeps sign-out one click away at every width (SAAS-116). */ flex-wrap: wrap; } /* Session context and the account menu, at the far end of the band — and the whole of the second row when the band wraps. */ .masthead-right { display: flex; align-items: center; gap: var(--s3); margin-inline-start: auto; min-width: 0; } /* Whose data this is — session context, deliberately not part of the wordmark. Quieter than the brand: it is a confirmation, and an Owner already knows the answer. */ .site-tenant { opacity: .8; font-size: .95em; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The page. A flex item beside the rail again (SAAS-162), and `min-width: 0` is what keeps it one: a flex item's floor is its content's min-content width, so without this the widest report would push the rail off the screen instead of scrolling inside its own box (.tblbox, .library-scroll). What it gives up to the rail is 232px — 1,390 → 1,158 at 1440, 998 at 1280 — and that price was on the rendered frames when Darius accepted them. The picker and filter grids pay it by dropping from five columns to four, which needs no rule of its own: they are `repeat(auto-fit, minmax(14rem, 1fr))` and have always answered to the width they are given. */ .site-main { box-sizing: border-box; min-width: 0; padding-inline: var(--s5); padding-block: var(--s5) var(--s8); } .brand { display: inline-flex; align-items: baseline; gap: var(--s2); color: inherit; text-decoration: none; white-space: nowrap; } .brand-name { font-weight: 650; letter-spacing: -.01em; } .brand-sep { opacity: .45; } .brand-qualifier { opacity: .85; font-size: .95em; } /* The page title takes the top of the type scale (SAAS-86). It was 1.35rem — 21.6px, the same step the section headings landed on — which is the undesigned proportion this slice exists to fix: a page whose title, its sections and its blocks all sit within 4px of each other has a hierarchy in the markup and none on the screen. 27 / 21 / 17 is the ladder. */ h1 { font-size: var(--t-h1); font-weight: 640; line-height: 1.2; letter-spacing: -.021em; color: var(--ink-strong); margin: 0 0 var(--s2); } .lead { color: var(--muted); margin: 0 0 var(--s5); max-width: var(--measure); } /* ================================================================================================= THE INFORMATION MARK (SAAS-462, ADR 0020 addendum of 2026-10-02). Darius, 2026-10-02, with a screenshot of /portal and its five-line paragraph: "we have to many text that explain things to the user, and it takes too much space, consider hiding them under a mouseover icon beside the thing that they explain". The component is InfoMark.razor, which holds the rule about WHAT goes behind it (an explanation) and what never does (state: a warning, a refusal, an error, an empty-state sentence, a "synced at" fact, a confirmation, a field's format rule). This is how it is drawn and how it opens. NO SCRIPT TO OPEN IT. Hover and keyboard focus are `:hover` and `:focus-within`, and a tap focuses the button on every browser that focuses a button on tap, so the panel opens there too and a tap elsewhere closes it. The one thing CSS cannot do is a tap on Safari, which does not focus a button — nav.js sets `data-open` for that, and adds Escape (`data-dismissed`) and click-away. THE PANEL IS ANCHORED TO THE MARK and is at most 40ch wide. On a phone the mark can sit anywhere along a line, so a panel hung off its left edge would run past the viewport: below 768px the mark stops being the positioning box, and the panel takes its horizontal extent from the nearest positioned ancestor (the page, when there is none) with the page's own gutters, while its vertical place stays where the markup put it — directly under the mark. Never wider than the viewport at 375px, by construction rather than by a measured luck. DESIGN TOKENS ONLY (ADR 0020): the panel is the popover idiom the account menu already is (`--surface`, `--border`, `--e2`), the glyph is `--muted` and takes `--ink-strong` when it is the thing that is open. No colour is spent on it, which is the whole of the rule. PRINT DROPS THE MARK AND ITS TEXT, in the print block at the foot of this file: paper reads like the screen, and the screen no longer carries the paragraph. ============================================================================================== */ .info-mark { position: relative; display: inline-block; vertical-align: middle; } /* A heading or a label followed by a mark sits on the same line as it. The mark is a SIBLING, never inside the heading (see InfoMark.razor: inside, its button name would become part of the heading's own), so the line is made by the heading becoming inline-block. `:has()` keeps every heading that has no mark exactly as it was. */ h1:has(+ .info-mark), h2:has(+ .info-mark), h3:has(+ .info-mark), h4:has(+ .info-mark), p:has(+ .info-mark) { display: inline-block; vertical-align: middle; /* ROOM LEFT FOR THE MARK (SAAS-478). An inline-block is as wide as its words, up to the line, so a long title or a three-line sentence took the whole line and the mark fell to the next one, alone (an Operator's People title and a patient's record title at 375 px). The words give up the mark's own width — `--s7`, which is the 44 px touch button and its 4 px margin — so the mark always has a place beside them. */ max-width: calc(100% - var(--s7)); } /* A field's label, legend or caption and the mark that explains it, on one line, on every form (SAAS-473 part b) — the filter strip's own `.field-head`, which part a scoped to its strip, made general: the hints of the write forms (an Operator's editors, a Branch's settings) moved behind marks beside their labels too. The strip's rule is more specific and wins there, unchanged. */ .field-head { display: flex; align-items: center; gap: 0; } /* ======================================================================================= A MARK SITS BESIDE THE WORDS IT EXPLAINS, ON EVERY SCREEN (SAAS-478) SAAS-473 part b put the remaining explanations behind marks, and a mark landed ALONE on the line under the words it explains, with empty space around it, in two places named at the time: after a legend and after a heading that holds a picker. A census in a browser over every screen at 375 and 1440 px found three more shapes: a sentence a dialog's own rule had already made a block, a title too long to leave the mark room, and a title wrapped in a head block of its own. ONE PATTERN, WRITTEN ONCE AND KEYED ON THE SHAPE RATHER THAN ON THE SCREEN: the mark is the SIBLING right after its words (never inside them: a button inside a heading or a legend becomes part of that heading's or group's name), and a `:has(+ .info-mark)` rule on the words puts the two on one line. The heading's rule above is the first of them, and gives the mark room; the rules below are the others. No screen places a mark by hand. ======================================================================================= */ /* A sentence a dialog or a form had already made a block (`.form-dialog .hint` is `display: block`, which is one class more specific than the rule above) — the state sentence whose reason is behind the mark. The `.hint` in the selector is what out-ranks it. */ p.hint:has(+ .info-mark) { display: inline-block; vertical-align: middle; max-width: calc(100% - var(--s7)); } /* A heading that is a picker: the Branch's Targets heading is a
whose summary holds the

(SAAS-357), and a
is a block, so the mark after it drew on the next line. As an inline-block it is one box on the heading's line. Its panel hangs off the disclosure (`position: relative`), which is as wide as the heading and is all the panel's anchor needs. */ details.pick-year:has(+ .info-mark) { display: inline-block; vertical-align: middle; max-width: calc(100% - var(--s7)); } /* A FIELDSET'S LEGEND AND ITS MARK, ON ONE LINE, WITH THE LEGEND'S NAME UNCHANGED. The mark stays OUTSIDE the , so the group is still named by the legend's own words and nothing else — which is the whole reason it was a sibling and therefore on its own line. A fieldset's *rendered* legend is laid out in the fieldset's border and is no part of any flex or grid the fieldset becomes (measured in Edge: both left the mark on the next line). A FLOATED legend is an ordinary box, and Bootstrap's reboot has floated legends for years for exactly that reason; the accessible name of a fieldset is its first child `legend` whatever that legend's `float`, so nothing a screen reader says changes. What a sighted reader sees change is that a BORDERED fieldset's legend sits inside the top edge instead of breaking it. Both are floats, and the legend is as tall as the mark's button (28 px, `--s5` and `--s1`), its words centred in that, so the pair is one row. The legend gives up the mark's width, so a long legend wraps instead of pushing the mark off the row. The first thing after the mark clears them, so a legend that wrapped to two lines still holds the content under it. */ fieldset > legend:has(+ .info-mark) { float: left; display: flex; align-items: center; box-sizing: border-box; min-height: calc(var(--s5) + var(--s1)); max-width: calc(100% - var(--s7)); } fieldset > legend:has(+ .info-mark) + .info-mark { float: left; } fieldset > legend:has(+ .info-mark) + .info-mark + * { clear: both; } .info-mark-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 28px; min-height: 28px; margin: 0 0 0 var(--s1); padding: 0; background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: help; vertical-align: middle; } .info-mark-button:hover, .info-mark:focus-within .info-mark-button, .info-mark[data-open] .info-mark-button { color: var(--ink-strong); } .info-mark-panel { display: none; position: absolute; z-index: 30; top: 100%; left: 0; width: max-content; max-width: min(40ch, calc(100vw - var(--s6))); /* A long key scrolls inside its own panel rather than running off the bottom of the screen. */ max-height: min(70vh, 32rem); overflow-y: auto; box-sizing: border-box; margin: 0; padding: var(--s3); background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--e2); /* It is drawn inside headings' neighbours and labels, so it takes none of their type. */ font-size: var(--t-small); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: start; white-space: normal; } /* The panel starts exactly where the mark ends — no gap — so the pointer's way from the button to the text it wants to read never crosses ground that is neither: a gap would close the panel the moment the pointer left the button. */ .info-mark:hover .info-mark-panel, .info-mark:focus-within .info-mark-panel, .info-mark[data-open] .info-mark-panel { display: block; } /* Escape closes it without taking the keyboard's place away from the button, and the next move of the pointer or the focus lets it open again. Written after the rules that open it, at the same specificity, so it wins. */ .info-mark[data-dismissed] .info-mark-panel { display: none; } /* What a panel holds: paragraphs, and a definition list when the explanation is a key. They take the panel's own type and spacing, not the page's. */ .info-mark-panel p { margin: 0; color: inherit; max-width: none; } .info-mark-panel p + p, .info-mark-panel p + dl, .info-mark-panel dl + p { margin-top: var(--s2); } .info-mark-panel dl { margin: 0; } .info-mark-panel dt { margin: var(--s2) 0 0; font-weight: 650; color: var(--ink-strong); } .info-mark-panel dt:first-child { margin-top: 0; } .info-mark-panel dd { margin: 0; } .info-mark-panel a { color: var(--action); } /* ================================================================================================= THE SYNC MARK (SAAS-469, ADR 0031's eighth addendum): what a Branch's copy has to say about itself, behind an AMBER mark beside the page's title instead of a box above its content. Darius, 2026-10-02 about 23:35, with a phone screenshot where the stale notice pushed the schedule off the screen: "hide the sync message in mouse over tooltips too". The component is SyncMark.razor, which carries the words (unchanged) and the rule that narrows SAAS-462's "state is never hidden": by his word, for this message only, and what keeps it from being quiet is that the mark is amber and visible. THE MECHANICS ARE THE INFORMATION MARK'S — `.info-mark` is on the element, so hover, focus, tap, Escape, click-away and the phone panel that stays inside a 375px screen are those rules and none of them is copied here. What is below is only what is different: a pill with a dot, the line, and a tinted panel. AMBER IS --warn, THE PRODUCT'S TOKEN FOR A STATED CONDITION (ADR 0020), and it is the DOT and the edge that carry it. The words stay in ink: --warn on the page measures 4.32:1 against the wash a hovered row puts under it, which a 13px caption cannot spend. An UNMEASURED copy keeps its achromatic look — a Server with no Sync Reader recorded is Daclaria's own missing step and not a clinic in trouble, the same argument `p.stale-notice.unmeasured` already makes — so its dot is --muted. ============================================================================================== */ .info-mark.sync-mark { vertical-align: middle; /* A gap before whatever follows on the line — the Focus on switch sits right after the mark on the calendars, and the capture at 1440px showed the pill touching its label. */ margin-inline-end: var(--s3); } .info-mark-button.sync-mark-button { gap: var(--s2); min-width: 0; min-height: 30px; margin: 0 0 0 var(--s2); padding: 0 var(--s3); border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1; cursor: help; white-space: nowrap; } .sync-mark[data-sync="warn"] .sync-mark-button { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); } .sync-mark-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .sync-mark[data-sync="warn"] .sync-mark-dot { background: var(--warn); } .sync-mark[data-sync="unmeasured"] .sync-mark-dot { background: var(--muted); } .sync-mark-glyph { flex: 0 0 auto; color: var(--muted); } .sync-mark-button:hover .sync-mark-glyph, .sync-mark:focus-within .sync-mark-glyph, .sync-mark[data-open] .sync-mark-glyph { color: var(--ink-strong); } /* The panel wears the same tint as the pill, and holds the paragraphs the page used to draw as boxes. They are not boxes any more: the panel is the box. */ .sync-mark[data-sync="warn"] .sync-mark-panel { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); } .sync-mark-panel { max-width: min(46ch, calc(100vw - var(--s6))); } .sync-mark-head { display: block; margin: 0 0 var(--s2); color: var(--ink-strong); font-weight: 650; } .sync-mark-panel p.stale-notice { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; max-width: none; color: inherit; } .sync-mark-panel p.stale-notice + p.stale-notice { margin-top: var(--s2); } /* --- The shell's navigation (SAAS-117, given its rail in SAAS-162) ------ */ /* Out of sight, still in the accessibility tree. It is the table captions' rule now — the collapsed rail that used to depend on it is gone, and with it the argument that made it load-bearing: a navigation link's accessible name is simply its own text, because nothing clips it. The rail wraps captions rather than clipping them, so that stays true. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ================================================================================================= ONE INVENTORY, TWO SHAPES BY WIDTH (SAAS-162, ADR 0027) — and the phone's shape is ONE CLOSED BAR since SAAS-463. ShellNav draws the areas and the current area's views ONCE, inside one
. This sheet lays that one markup out twice: · 768px and up — DIRECTION A. A 232px rail down the left of the page in BOTH realms, with the views nested under the area they belong to. That is what the masthead could no longer hold: an Owner's Appointments strip is nine tabs, 2,063px of caption. The
is made transparent to layout here, so the rail is exactly what SAAS-162 drew. · Below 768px — A CLOSED MENU BAR. A 44px Menu button on the masthead's own teal, naming the current area. Opened, the navigation is the SAME COLUMN the rail is, on the page's surface: areas, the current area's views nested under it, the Administrative group last. ⚑ THE PHONE'S SHAPE WAS DIRECTION B UNTIL 2026-10-02 and Darius reversed it himself ("mobile view need some consideration too, the menu now takes too much space on the top, we need to use collapsible menu"). B drew every area as a row on the masthead's colour and the views as a band beneath: 273px to 329px from the top of the viewport to the page (a 50px masthead and 223px to 279px of navigation), measured at 375px on /portal, the dashboard, the merged calendar and Billing, before the page's title. ADR 0027's addendum of 2026-10-02 records the reversal and its stated cost: the menu is closed on every page load, so the bar names the current area. The rules below are written narrow-first, so the phone shape is the base and the rail is what a media query adds. The area, view and group rules are the rail's and are shared by both widths — an open phone menu is that column — so what the two widths differ in is the CONTAINER only. NO SCRIPT FOR THE SHAPE. A
opens on click and on Enter and is in the tab order; nav.js adds Escape and click-away, as it does for the account menu. Nothing is stored or restored. ============================================================================================== */ /* The rail and the page are siblings, so their arrangement is this container's to decide: stacked on a phone, side by side above the breakpoint. */ .shell-body { display: flex; flex-direction: column; min-height: 0; } /* THE MENU BAR (SAAS-463). One row, 44px — the floor every target here clears — wearing --brand so it reads as the masthead's own continuation: the header ends and this begins with no gap and no line between them. Full --on-brand, not a quieter tint, and that is measured rather than chosen: --brand is teal at 4.95:1 against white, so there is almost no headroom (88% white measures 4.21:1, 92% measures 4.45:1, both under the 4.5:1 floor). */ .shell-menu { display: block; } .shell-menu > summary { display: flex; align-items: center; gap: var(--s3); box-sizing: border-box; min-height: 44px; padding: var(--s1) var(--s4); background: var(--brand); color: var(--on-brand); cursor: pointer; list-style: none; } /* The marker goes in both engines' spellings, or the browser draws its own triangle beside our glyphs — the account menu's own note. */ .shell-menu > summary::-webkit-details-marker { display: none; } /* The two washes are translucent black (see --masthead-hover), so they go OVER --brand as an image: put in `background-color` they would replace the teal with grey, which is how the first render of this bar looked. Cutting into the band rather than lifting out of it is also the measured way round — white on a lightened teal drops under 4.5:1, on a darkened one it rises. */ .shell-menu > summary:hover { background-image: linear-gradient(var(--masthead-hover), var(--masthead-hover)); } /* Open is a shade deeper than closed, so the bar reads as the lid of the list under it. The state is also in the chevron, which turns, and in the list itself; colour is never the only carrier. */ .shell-menu[open] > summary { background-image: linear-gradient(var(--masthead-current), var(--masthead-current)); } .shell-menu-icon { flex: 0 0 auto; } .shell-menu-label { flex: 0 0 auto; font-weight: 650; } /* Where you are, beside the button. It is the one thing the closed bar must say, because a menu that re-closes on every page cannot be read for it. It truncates rather than wraps: one row is the whole point of the bar. A rule down its left is the divider — currentColor at a fraction, so no new colour is spent. */ .shell-menu-here { min-width: 0; padding-inline-start: var(--s3); border-inline-start: 1px solid color-mix(in srgb, currentColor 45%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-menu-chevron { flex: 0 0 auto; margin-inline-start: auto; transition: transform 160ms ease; } .shell-menu[open] > summary .shell-menu-chevron { transform: rotate(180deg); } /* THE OPEN MENU: the rail's own column, on the page's surface. It follows the bar in the flow, so it pushes the page down rather than floating over it — nothing to dismiss, nothing that hides a title, and the page below is still where the reader left it. */ .shell-nav { display: block; box-sizing: border-box; background: var(--surface); color: var(--ink); } /* Heads the rail's column. Drawn at one width only: on a phone the bar above is the heading. */ .nav-cap { display: none; } /* 44px, at BOTH widths and not only under `pointer: coarse` (ADR 0027 point 4). The phase-1 measurement found the old .top-link at 37px, and the coarse-pointer rule did not reach it: that block widens buttons and submits, and these are anchors. The floor is the target's own rule here, and SAAS-163 pins it portal-wide. A COLUMN, so a long caption wraps rather than widening the menu. `Calendar — Klinik Kidz Dental Sehati` was the case that decided this, and its wording was SAAS-164's to shorten. THE SECOND SELECTOR IS THE ADMINISTRATIVE GROUP'S SUMMARY (SAAS-369) — one rule, so a group's name is the same target, at the same height, with the same padding as an entry that goes somewhere. A summary is a box before any sheet touches it, so this is what makes it the same box rather than what makes it a box at all. */ .nav-area, .nav-group > summary { display: flex; align-items: center; min-height: 44px; padding: var(--s1) var(--s3); border-radius: var(--r-sm); color: inherit; text-decoration: none; white-space: normal; } .nav-area:hover, .nav-group > summary:hover { background: var(--row-hover); } /* Where you are: teal on the page's own surface. The weight change carries the state for anyone who cannot see the tint at all. */ .nav-area[aria-current="page"] { background: var(--teal-wash); color: var(--nav-active-ink); font-weight: 650; } /* ======================================================================= THE ADMINISTRATIVE GROUP (SAAS-369) — the one disclosure in this shell. ⚑ IT NARROWS ADR 0027 POINT 2, which ruled "nothing hidden, nothing to open, no
drawer at all" for the narrow shape. Darius asked for this one himself — "put people, closing days, and record access as a submenu for a new collapsible menu called 'Administrative'" — and what the ruling protected survives: the six daily surfaces are never hidden at either width, and the three that collapse are administration. ADR 0027's objection was a control that hid THE MENU and re-closed on every navigation; this one holds three entries and is open on every page inside it. NO SCRIPT. A
opens on click and on Enter, is in the tab order and announces its own expanded state — see ShellNav for why nav.js was not spent on it. The account menu one band up is the same element for the same reason. ⚑ SINCE SAAS-463 IT SITS INSIDE THE PHONE'S MENU, which is the one disclosure above it: the group is a block in the column, at both widths, so it takes the column's width without being told to and the chevron sits at the far end of its row, where a disclosure's marker belongs. ======================================================================= */ .nav-group { display: block; box-sizing: border-box; min-width: 0; } .nav-group > summary { /* The marker goes in both engines' spellings. Without this the browser draws its own triangle beside the chevron we authored — the account menu's own note. */ list-style: none; cursor: pointer; justify-content: space-between; gap: var(--s2); } .nav-group > summary::-webkit-details-marker { display: none; } /* The chevron turns rather than being swapped for a second glyph: one path, and the open state is readable while the transition runs. */ .nav-group > summary .glyph { flex: 0 0 auto; transition: transform 160ms ease; } .nav-group[open] > summary .glyph { transform: rotate(180deg); } /* ⚠ WHERE YOU ARE, WHEN THE GROUP IS SHUT. A collapsed group that did not say it holds the current page would answer "which section am I in" only to a reader who opens it, which is the one thing a disclosure must not cost. Three carriers, because ADR 0020 never lets colour be the only thing saying a state: the wash and the weight the current entry already uses, and — in the markup rather than here — a visually-hidden clause rendered only when it is true. Deliberately NOT `aria-current`. That attribute names the current ITEM in a set, and the item is the link inside; a summary wearing it as well would put two current things in one navigation. */ .nav-group > summary.holds-current { background: var(--teal-wash); color: var(--nav-active-ink); font-weight: 650; } /* The entries inside, stacked and nested under the name they belong to, with the same rule down the left the views get — the two levels of nesting in this column are the same shape, so a reader learns one. Stretched rather than shrink-to-fit: in a column the entries are rows, and a row a reader can only hit across the width of its own caption is a worse target than the 44px floor already bought. */ .nav-group-links { display: flex; flex-direction: column; align-items: stretch; gap: var(--s1); margin: var(--s1) 0 var(--s2) var(--s4); padding: 0 0 0 var(--s3); border-left: 1px solid var(--border-strong); } /* THE SECOND LEVEL, nested under its area at both widths, and the rule down the left is what says so — indent alone would read as a gap. Since SAAS-463 an open phone menu draws it exactly as the rail does: the views are inside the menu, under the area they belong to, and are not a band of their own beneath it (that band, with the area's name over it, was direction B's). */ .nav-second { display: block; box-sizing: border-box; margin: var(--s1) 0 var(--s2) var(--s4); padding: 0 0 0 var(--s3); border-left: 1px solid var(--border-strong); } /* AN AREA WITH NO SECOND LEVEL DRAWS NO BLOCK FOR ONE: the outlet is always rendered (its place in the markup must not move), and the shell cannot know whether a page filled it — a section is content, not a signal — so the emptiness itself is the test. */ .nav-second:not(:has(.surface-views)) { display: none; } /* THE VIEWS THEMSELVES (SAAS-74's strip, SAAS-152's second copy, moved into the shell by SAAS-162). The page still builds them; only where they land changed, so every address they carry — the filters that survive a crossing, the day on a calendar tab — is untouched. A column of rows at both widths, 44px each like the areas above them. The tab idiom's underline has no edge to sit on in a column, so the current view is marked by the wash the pager and the table rows already use for "this one". */ .surface-views { min-width: 0; } .surface-views ul { display: block; margin: 0; padding: 0; list-style: none; } .surface-views a.view { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-size: var(--t-small); white-space: normal; } .surface-views a.view:hover { color: var(--ink); background: var(--row-hover); } .surface-views a.view.current { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-strong); font-weight: 650; } /* --- WIDE: the rail (direction A) --------------------------------------- */ @media (min-width: 768px) { .shell-body { flex-direction: row; align-items: stretch; } /* 232px, which is the width the frames were accepted at. It is not sticky, and that is a stated choice rather than an oversight: the masthead above it is, and it carries the one control that must never need scrolling to reach (SAAS-116). A sticky rail would have to know that band's height to sit under it, and a wrong answer hides the top of the menu behind it. So the rail scrolls with the page, exactly as the view strip it absorbed always did. */ .shell-nav { flex: 0 0 232px; width: 232px; padding: var(--s4) var(--s3); border-right: 1px solid var(--border); } /* The other item in the row, and it takes what is left. Only here: below the breakpoint the shell body is a column, where `flex-basis: 0` would make the page's height a thing the browser has to argue itself back out of. */ .site-main { flex: 1 1 0; } .nav-cap { display: block; padding: 0 var(--s2) var(--s2); font-size: var(--t-micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } /* THE PHONE'S DISCLOSURE, UNDONE (SAAS-463). A closed
hides its contents in its own shadow tree, so at this width the bar is not drawn, the disclosure takes no box of its own, and the content slot is made visible and box-less — whether or not anything opened it. The rail is then a direct item of the row, exactly as SAAS-162 drew it. Behind a feature query, and the reason is the failure mode: a browser that does not know `::details-content` would drop these rules but keep a closed
, and a rail nobody can open is worse than a Menu button beside one. Without the query's support nothing here applies, so the bar stays and opens the rail. */ @supports selector(::details-content) { .shell-menu { display: contents; } .shell-menu > summary { display: none; } .shell-menu::details-content { content-visibility: visible; display: contents; } } } /* --- The account menu (SAAS-116, SAAS-117) ----------------------------- */ /* A
, so it opens, closes, takes focus and announces its own expanded state with no script of ours — see MainLayout. `position: relative` is what the popover hangs off. */ .account-menu { position: relative; } .account-menu > summary { /* The marker goes in both engines' spellings. Without this the browser draws its own triangle beside the chevron we authored. */ list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; padding: var(--s1) var(--s2); border: 1px solid var(--masthead-line); border-radius: 999px; color: inherit; font-size: var(--t-small); } .account-menu > summary::-webkit-details-marker { display: none; } .account-menu[open] > summary { background: var(--masthead-current); } /* A long email is the common case, not the exception, and it must not push the chevron off the band. */ .account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The initials chip. Monospace, so two letters and one letter occupy nearly the same width and the summary does not change size between an Operator and an Owner. */ .mono-chip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding-inline: 4px; box-sizing: border-box; border: 1px solid var(--masthead-line); border-radius: 999px; font-family: var(--mono); font-size: var(--t-micro); } /* The popover leaves the brand band and lands on the page's own surface — it is content, not chrome, and white-on-teal menu items would read as part of the header. Right-aligned to the summary, because the summary is at the right edge of the band. */ .menu-pop { position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 50; width: 16rem; box-sizing: border-box; padding: var(--s3); background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--e2); } /* overflow-wrap, not ellipsis: inside the menu there is room to break a long address over two lines, and this is the one place the whole of it is meant to be readable. */ .menu-id { margin: 0 0 var(--s1); font-weight: 600; color: var(--ink-strong); overflow-wrap: anywhere; } .menu-sub { margin: 0; color: var(--muted); font-size: var(--t-small); } .menu-sep { border: 0; border-top: 1px solid var(--line); margin: var(--s3) 0; } .menu-item { display: block; padding: var(--s2) 0; color: var(--ink); text-decoration: none; } .menu-item:hover { color: var(--action); } /* Sign out is not the page's action — it is the way out of it. Outlined, and full width so it reads as the foot of the menu rather than as one more line of it. */ .menu-action { margin-top: var(--s2); width: 100%; padding: var(--s2) var(--s4); font: inherit; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; } .menu-action:hover { border-color: var(--ink); } /* --- Narrow screens ---------------------------------------------------- */ @media (max-width: 767.98px) { /* NOT STICKY HERE, in either realm. This is operator.css's rule generalised rather than a new one. It argued that a sticky band is worth 44px of a desktop and not worth a third of a phone, on a page that is mostly one tall text box — and the band costs far more than 44px here, because it wraps: eight portal destinations take three rows at 375px, and brand and account take one each. A fifth of the viewport permanently occupied by chrome is worse than a flick to the top of the page. SAAS-162 MADE IT TRUER RATHER THAN OBSOLETE. The eight destinations are no longer inside the header at this width — they are the row below it — but they are still on screen, and the current area's views are a band below that again. Direction B pays 252px of chrome once, and once is the whole point: sticking it would spend that on every viewport for the rest of the page. Sign-out is still reachable without scrolling on arrival at every page, which is what SAAS-116 asked for; what it is not, at this width, is reachable without scrolling *back*. ⚑ SAAS-463 (2026-10-02) CUT THE CHROME THIS ARGUES ABOUT from 273–329px to 94px at 375px — the 50px masthead and the 44px closed Menu bar — and left this rule as it was: whether a 94px band should stick is a separate ruling, and nobody has made it. */ /* ⚑ SAAS-468 (2026-10-03) REVERSED THE RULE THAT STOOD HERE. This block said `.site-header { position: static }` and the argument above it still reads true of the band it argued about: a sticky band that wraps to three rows is a fifth of a phone. What Darius chose instead is a band that is ONE ROW — a 56px bar holding the Menu, the page's title and the account — and a sticky 56px is worth having where a sticky 94px was not: it is what keeps the title, the sync mark and the account in reach while a calendar scrolls. So the masthead is sticky again below 768px, the bar's own rules are in the SAAS-468 section at the foot of this sheet, and a sign-in page, which has no menu and no bar, keeps the static band it always had. */ .site-header:not(.has-menu) { position: static; } /* AND SO A LANDED ROW OWES THE BAR'S HEIGHT (SAAS-170, SAAS-468). The offset buys clearance from a sticky band, and below 768px the band is the 56px bar — so a row a crumb lands on is not scrolled under it. The rule that spends the offset is written once and reads this token, so the phone case is a value rather than a second rule. */ :root { --landing: var(--bar); } /* Match the page's gutter, so the wordmark sits over the page's own left edge rather than 8px right of it. */ .masthead-inner { padding-inline: var(--s4); gap: var(--s3); } .site-main { padding-inline: var(--s4); padding-block: var(--s5) var(--s7); } /* The band is already two or three rows here; a fixed 16rem popover would hang off the right edge of a 375px viewport. It spans what is left of the row instead. */ .menu-pop { width: min(18rem, calc(100vw - var(--s6))); } /* THE OPEN MENU'S OWN FRAME (SAAS-463): the rail's column framed as a panel — gutters matching the page's, and a rule under it so the page below reads as a separate thing rather than as more menu. */ .shell-nav { padding: var(--s2) var(--s4) var(--s3); border-bottom: 1px solid var(--border); } /* THE INFORMATION MARK'S PANEL, ON A PHONE (SAAS-462). The mark can sit anywhere along a line, so a panel hung off its left edge would run past the viewport: it stops hanging off the mark and takes its horizontal extent from the page's gutters instead, while its vertical place stays directly under the mark. */ .info-mark { position: static; } .info-mark-panel { left: var(--s4); right: var(--s4); top: auto; width: auto; max-width: 40ch; } } /* --- Interaction basics ----------------------------------------------- */ /* One ring, everywhere. Never removed: a keyboard reader who cannot see focus cannot use the branch checkboxes at all. */ :focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: var(--r-sm); } a { color: var(--action); } /* ======================================================================= A NAME THAT OPENS A THING (SAAS-363), DECLARED ONCE. Darius read the live portal and reported it: "Receipt no. in billings are clickable to open the detail of the billing, but it doesnt indicate that it is clickable, same as patient name in patients, make it so it does look clickable like the brance name in brances menu, with underline and color". ⚠ THE PRODUCT ALREADY HAD THE RIGHT ANSWER AND IT WAS NOT A CLASS — IT WAS AN ABSENCE. Eleven cells across four tables carry `a.row-link`: a Branch name into its own page, a patient's name into their record, a receipt number into the receipt. The Branch name looked right because NOTHING styled it — it fell through to `a` above and the browser's own underline. The three that looked wrong were the three somebody had written a rule for, each saying `color: inherit; text-decoration: none` and moving the underline to :hover, each with the same argument attached: "fifty underlined names down a column is a page of rules." The argument is real and it lost: fifty underlined names are a page of links, and a name that opens a record and does not say so is a control the reader never finds. So the treatment is one rule, and the Branch name joins it rather than keeping its lucky exemption. THE THICKENING IS THE HOVER, NOT THE UNDERLINE. The underline is already there at rest, so hover has to say something else; a hue change would have to come off --row-link's headroom and is the one thing this palette cannot afford here (see --row-link for the five measurements). `text-underline-offset` is the register's own figure, kept: its hover rule used 2px and this is that treatment made permanent rather than a new one invented beside it. ======================================================================= */ a.row-link { color: var(--row-link); text-decoration: underline; text-underline-offset: 2px; } a.row-link:hover, a.row-link:focus-visible { text-decoration-thickness: 2px; } /* ---------------------------------------------------------------------- THE ROW YOU CAME BACK TO (SAAS-170). A back crumb rebuilds the reader's list and ends in `#`. The browser then does two things with that on its own, and both are the reason this slice needs no JavaScript at all: it scrolls the named element into view, and it matches `:target` against it so a stylesheet can mark it. Nothing on these Surfaces runs script — there is no circuit here — so a cure that had to scroll a window after the fact was never available. ONE SELECTOR RATHER THAN A LIST OF ELEMENTS. A row is a `tr` on six tables and an `li` on the medical-records chronology, and the next list to grow a crossing will be something else again. `[id^="r_"]` is RowAnchor's own prefix, so what is selected is exactly "an anchored row", present and future, rather than a list of tag names somebody has to remember to extend. THE OFFSET IS THE ROW'S OWN, not the frame's. `scroll-padding-top` on the scrolling element would have offset every fragment landing in the product from a slice about back crumbs — including the report previews and the day-end blocks, which scroll inside boxes of their own. Scoped to the rows this slice anchors, the change cannot reach anything it was not asked to. THE MARK IS THE WASH AND NOTHING ELSE. --teal-wash is already this product's "this is the one you are on" — it is the selected row a lit star sits on (see --star) — so a landed row wears the idiom the reader has already learnt rather than a new one. It is not a status and gets none of the ladder's hues, and it fades on its own the moment the reader clicks anything else, because `:target` stops matching when the fragment does. ---------------------------------------------------------------------- */ [id^="r_"]:target { scroll-margin-top: var(--landing); } /* On a table the wash goes on the cells, which is this sheet's rule for every row state — a `background` on a `tr` is painted under the cells rather than by them once the borders are collapsed. Specificity beats the hover wash beside it deliberately: where the pointer happens to be resting matters less than where the reader was sent. */ table tbody tr[id^="r_"]:target > td { background: var(--teal-wash); } /* The chronology's entries are list items with no box of their own. The spread shadow is what gives the wash its padding without giving the entry a size — a rule that added real padding would move the page under the reader at the exact moment they were trying to find their place on it. */ li[id^="r_"]:target { background: var(--teal-wash); border-radius: var(--r-sm); box-shadow: 0 0 0 var(--s2) var(--teal-wash); } button, [type="submit"] { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } /* Touch targets are the last section of this sheet, not this one. The 44px floor has to be able to beat the rule it is flooring, and at equal specificity that means coming last — see THE 44px FLOOR (SAAS-163) at the foot of the file. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } table.branches { border-collapse: collapse; width: 100%; } /* The row's height is the density ruling (SAAS-86): --row-y top and bottom against a 14px body gives the 42px row. Roomy (15.5px / 48px) and compact (12.5px / 36px) were both built and refused. It is written as a token rather than a value because the report table, the register, the ledger and the items table are all this same row, and density that has to be changed in four places is density nobody will change. */ table.branches th, table.branches td { border-bottom: 1px solid var(--line); padding: var(--row-y) var(--s3) var(--row-y) 0; text-align: left; vertical-align: top; } table.branches th { font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } td .ok { color: var(--ok); font-weight: 600; } td .notice { color: var(--warn); } /* A STATED CONDITION ON THIS TABLE WEARS NO COLOUR (SAAS-236), and it is `tr.sync-unknown`'s argument two rules down applied to the Status column: a Branch onboarded reports-only holds no runtime account by design, so "reports-only — no runtime account" is how it was set up, not a clinic in trouble. This cell read `Access denied for user '_no_such_runtime'` in `.notice` amber beside three green sync columns until then — an outage notice about a Branch serving every page asked of it. Amber is kept for the things an Operator can act on, which on this row is a Report Credential that is missing or refused. */ td .stated { color: var(--muted); } tr.unreached td { background: color-mix(in srgb, var(--warn) 6%, transparent); } /* --- THE FLEET'S SYNC COLUMNS (SAAS-213, ADR 0031 ruling 3) -------------- Three columns saying how old the copy is, beside the three saying whether the Branch answers. The two are independent — the ADR's finding is that a Branch can answer in 4 ms while serving a copy that stopped arriving six hours ago — so they are coloured independently and a row can legitimately wear both washes at once. THE WASH IS ON THE ROW, not on the cell, and that is the whole reason the sort exists: an Operator scans forty rows for colour before reading a single word, and a tinted cell in column six is not something a scan finds. Red and amber are `--bad` and `--warn`, the status ladder's own two, at the same 6% `tr.unreached` already uses — enough to find, not enough to make the text underneath fail its contrast. */ tr.sync-attention td { background: color-mix(in srgb, var(--warn) 6%, transparent); } tr.sync-incident td { background: color-mix(in srgb, var(--bad) 7%, transparent); } /* AND THE OUTCOME CELL CARRIES THE INK. A 6% wash is what `tr.unreached` has always used and it is right for a row tint — but a wash alone was measured on the SAAS-213 capture and is close to invisible in the dark theme, and "failing branches read red" is the ruling. So the one cell that says what the Agent's last run did takes the status ladder's own ink, which is `td .ok` and `td .notice`'s existing habit on this same table rather than a new idea. */ tr.sync-attention td.sync-outcome { color: var(--warn); font-weight: 600; } tr.sync-incident td.sync-outcome { color: var(--bad); font-weight: 600; } /* "We could not ask" is ACHROMATIC, deliberately, and it is the same argument `p.stale-notice .unmeasured` makes one screen away: a Server with no Sync Reader recorded is Daclaria's own missing step, not a clinic in trouble, and painting it amber would make forty un-onboarded Branches look like forty failures during the very rollout that creates them. */ tr.sync-unknown td.sync-cell { color: var(--muted); } /* The two narrow ones. A wrapped timestamp costs a row its scan line, and these two are what the scan is for. */ td.sync-cell { white-space: nowrap; } /* The Agent's own words. Truncated in the markup to a lead (SyncMessageText) with the whole of it in the cell's `title`, so this only has to stop the lead from setting the table's width. */ td.sync-said { white-space: normal; max-width: 32ch; } /* --- ONE BRANCH'S RUN HISTORY (SAAS-213) --------------------------------- The Agent's own log on a screen. It reuses `table.branches` wholesale — same row height, same rule, same heading — because it IS the same kind of table and a second set of measurements is how two tables in one realm come to disagree about a row. The failed row is washed for the fleet page's reason and at the fleet page's strength. An open row is not: a run in flight is the normal state for one row on every visit, and a wash that fires on the ordinary case is a wash a reader stops seeing. */ table.sync-runs tr.run-failed td { background: color-mix(in srgb, var(--bad) 7%, transparent); } td .bad { color: var(--bad); font-weight: 600; } /* The Agent's own name for what went wrong — `verification-failed`, `sync-failed`. A label rather than prose, because it is the word an Operator searches the Agent's README for, and monospace because it is an identifier rather than a sentence. */ .run-signal { display: inline-block; margin-right: var(--s2); padding: 0 var(--s2); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); border-radius: var(--r-sm); font-family: var(--mono); font-size: var(--t-small); color: var(--bad); white-space: nowrap; } /* THE SCHEMA-CHANGE MARKER (SAAS-253). A chip beside the Branch's name on the fleet row and on its own page, in --warn rather than --bad: nothing has broken. The clinic's structure moved and the Agent rebuilt the copy inside the hour; what is owed is a look, not a fix. It is deliberately NOT a row wash. The row's washes are freshness states, and putting a schema change in that channel would file it as a sync problem and set it beside the incident somebody has to act on tonight. */ .schema-changed { display: inline-block; margin-left: var(--s2); padding: 0 var(--s2); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 8%, transparent); font-size: var(--t-small); color: var(--warn); white-space: nowrap; } /* One probed reading's verdict. `reads` is achromatic on purpose — a probe over a healthy clinic is fifteen rows of it, and fifteen green ticks is a wall a reader stops seeing, which is exactly how the one red line in the middle gets missed. */ .probe-reads { color: var(--muted); } .probe-fails { color: var(--bad); font-weight: 600; } /* MySQL's own words, kept as an identifier rather than set as prose: it names a column. */ td.probe-said { font-family: var(--mono); font-size: var(--t-small); } code { font-family: var(--mono); } /* The three small centred forms: the sign-in, the change-password page SAAS-120 put behind the account menu, and the Accept page SAAS-179 put outside both fences. Named beside .portal-signin rather than given rules of its own — it is the same shape, and a second copy of a form's measurements is how two screens drift apart. */ .portal-signin, .portal-account, .portal-accept, .portal-home { max-width: 24rem; } .portal-signin .field, .portal-account .field, .portal-accept .field { margin: 0 0 var(--s4); } .portal-signin label, .portal-account label, .portal-accept label { display: block; font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: var(--s1); } .portal-signin input, .portal-account input, .portal-accept input { width: 100%; box-sizing: border-box; padding: var(--s2); font: inherit; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); } /* The sign-in submit is the one action on its page, so it is the filled one. */ .portal-signin button, .portal-account button, .portal-accept button, .portal-home button { padding: var(--s2) var(--s4); font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--action); color: var(--on-action); cursor: pointer; } .portal-signin button:hover, .portal-account button:hover, .portal-accept button:hover, .portal-home button:hover { background: var(--action-hover); } /* The Accept page's one refusal (SAAS-179) wears the sign-in refusal's box. It is a class of its own rather than the same one because the page draws both — this for a link that no longer opens anything, .signin-error for a password the form itself refused — and a reader looking at the markup should be able to tell which happened. */ .signin-error, .accept-refusal { border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 8%, transparent); color: var(--bad); border-radius: var(--r-sm); padding: var(--s2) var(--s3); max-width: 60ch; } dl.portal-identity { margin: 0 0 var(--s5); } dl.portal-identity dt { font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: var(--s2); } dl.portal-identity dd { margin: 0; } /* --- The dashboard (SAAS-40, typeset in SAAS-51) ------------------------ */ /* No cap. It used to be 62rem, which was left behind when the shell stopped being centred (SAAS-49): the header's clinic group sits against the right edge of the viewport, so a 62rem page beneath it left that caption stranded far out past the table it belongs to. The page now reaches the same edge the chrome does. Prose is still measured — `.lead`, the legend and a branch's stated message each carry their own limit, because a sentence 1900px wide is unreadable in a way a table is not. */ .portal-dashboard { max-width: 100%; } .muted { color: var(--muted); } .small { font-size: var(--t-body); } /* Row rhythm. These rows run two and three lines tall — a stamp over its age, a stack of sources beside it — so the padding has to be set against the row's *height* rather than against a line of text. Below about .8rem the gap between one branch's second line and the next branch's first is smaller than the gap inside the row, and the eight branches read as one block of text. */ table.freshness th, table.freshness td { padding-block: var(--s3); padding-inline-end: var(--s6); } table.freshness tbody tr:hover td { background: var(--row-hover); } /* Same rule as the report results, for the same reason: four columns of stamps and source names have a min-content width no phone has, and a table that pushes the whole page sideways is worse than one that scrolls inside its own box. Measured at 375px — the page's own scrollWidth stays at the viewport. */ .freshness-scroll { overflow-x: auto; } table.freshness td.branch-name { font-weight: 600; color: var(--ink-strong); } /* Figures line up down the column. This is the reason the design system self-hosts Inter — eight stamps of the form `2026-08-08 13:20` are a column of digits, and proportional figures make a column of digits ragged for no reason. */ table.freshness td.figures { font-variant-numeric: tabular-nums; } /* Nothing wraps on a wide screen: a branch name broken over two lines while empty space sits to the right of the last column is just untidy. Below the breakpoint the opposite is true — there the row needs every chance to fit, so these are scoped rather than global. */ @media (min-width: 768px) { table.freshness td.branch-name, table.freshness td.figures { white-space: nowrap; } } table.freshness td.figures .stamp { color: var(--ink-strong); } /* A branch that could not be measured. Neutral, not amber: the row is a stated condition, not a fault, and the previous wash made "Not connected yet" look like a system in trouble. */ table.freshness tr.unreached td { background: color-mix(in srgb, var(--muted) 5%, transparent); } table.freshness tbody tr.unreached:hover td { background: color-mix(in srgb, var(--muted) 9%, transparent); } /* ⚠ THE SYNC'S WASH, ON THIS TABLE TOO (SAAS-390). Written out here rather than left to the generic `tr.sync-attention td` rules the Operator fleet table uses, because `table.freshness tr.unreached td` above is a more specific selector and would otherwise beat them on a row that is both unmeasured and behind. Same two colours at the same two strengths, so the Operator's fleet page and an Owner's branch list cannot disagree about one Branch. These rules follow `tr.unreached` on purpose: equal specificity, so source order decides, and a Branch whose sync is genuinely behind reads as behind rather than as merely unmeasured. */ table.freshness tr.sync-attention td { background: color-mix(in srgb, var(--warn) 6%, transparent); } table.freshness tr.sync-incident td { background: color-mix(in srgb, var(--bad) 7%, transparent); } /* AND THE SYNC CELL CARRIES THE INK — `tr.sync-attention td.sync-outcome`'s habit on the fleet table, for its measured reason: a 6% wash alone is close to invisible in the dark theme, and "the sync has not succeeded" is the one thing this row now raises its voice about. */ table.freshness tr.sync-attention td.copy-synced-cell { color: var(--warn); font-weight: 600; } table.freshness tr.sync-incident td.copy-synced-cell { color: var(--bad); font-weight: 600; } /* THE CONTENT PILL, AND IT IS ACHROMATIC IN EVERY STATE (SAAS-390). It used to come in three weights — green, amber, red — off `FreshnessWeights`, which mapped the five-rung ladder onto "keeping up / drifting / broken". That mapping is retired with its C# half, and the reason is Darius's ruling of 2026-09-24: what the ladder measures is the CLINIC'S OWN ACTIVITY, and painting a clinic that has been quiet in the colour of a broken sync is the portal crying wolf. A JNJ Batam row read red "more than 24 hours" ninety minutes after a successful sync, because one of its five sources had had no new row for four days. So the pill states the rung in the page's own ink and wears the shape alone. The colour that readers scan for now lives one column to the left, where the Agent's own word is. */ .bucket { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: var(--s1) var(--s2); font-size: var(--t-body); white-space: nowrap; } /* The by-source list. It reads as a footnote to its row, not as a second table: it used to be capped at 20rem and justified apart, which pushed every age to the same right-hand edge and built a second numeric column that carried as much visual weight as the branch's own status. The ages now sit against their source, quiet, and only the governing one is emphasised. The list is why the indicator exists — Bandung's payments are current while its billing froze ten months ago — so it is subordinated, never dropped. It stays one stacked line per source: three sources is a short list, and flowing them across the row was measured doing nothing at any width the product is read at while making the row's shape depend on table-layout arithmetic. */ ul.sources { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); line-height: 1.65; color: var(--muted); } ul.sources li { display: flex; gap: var(--s2); align-items: baseline; } /* The stalest probed table — the one the "Oldest source" cell names in words (renamed from "Last received" by SAAS-390, because stalest is what it holds). This is the same fact where the sources are listed. Emphasis, never colour: it is the clinic's own activity, not a fault of ours. */ ul.sources li.governing { color: var(--ink); font-weight: 600; } ul.sources .age::before { content: "·"; margin-inline-end: var(--s2); color: var(--border-strong); } /* Never bold, even on the governing row: the age is the supporting detail, and the source name is what an owner is scanning for. */ ul.sources .age { font-weight: 400; color: var(--muted); } /* The Agent's one word per source — "quiet" or "not through the last sync" (SAAS-410). Drawn exactly as the age beside it: the same separator, the same weight, the same muted ink, and NO COLOUR OF ITS OWN. Colour on this page is the Sync Concern's alone (SAAS-390), and a stopped table is a fact to read, not an alarm to paint. */ ul.sources .outcome::before { content: "·"; margin-inline-end: var(--s2); color: var(--border-strong); } ul.sources .outcome { font-weight: 400; color: var(--muted); } p.stated { margin: 0 0 var(--s1); max-width: 44ch; color: var(--muted); font-size: var(--t-body); } /* The payer comparison's limitation (SAAS-392) is a paragraph of prose rather than a condition of a few words, so it is given a reading measure instead of the stated sentence's 44ch. It stays a `.stated` in every other respect — muted, achromatic, no pill — because it is a caveat about a figure and not a fault. */ p.basis-caveat { max-width: 68ch; margin: var(--s2) 0 0; } /* A stated condition wears the pill's shape and none of the ladder's colour. "Not connected yet" is not a rung and not a fault — it is the absence of a measurement — and painting it amber, as the old `.notice` did, made an un-onboarded branch look like a failing one. Achromatic also keeps the palette rule intact: colour on this page means the ladder, and nothing else. Scoped to the dashboard. `.notice` on the ops fleet table carries a whole Draining sentence, which a nowrap pill would ruin. */ .portal-dashboard .notice { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: var(--s1) var(--s2); font-size: var(--t-body); white-space: nowrap; color: var(--muted); background: transparent; } /* THE KEY'S OWN RULES LEFT WITH IT (SAAS-462). `.legend` drew the "How to read this" section under the Branches table — a bordered block with a small-caps heading and a two-column grid. The key now sits behind the information mark beside the page title, inside `.info-mark-panel`, which carries the spacing and the term weight a definition list there needs (SAAS-390's rule that a key's terms read heavier than their definitions is kept: `.info-mark-panel dt`). Nothing else drew a `.legend`. */ .portal-footer { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); } /* Sign out is not the page's action — it is the way out of it. Outlined. */ .portal-footer button { padding: var(--s2) var(--s4); font: inherit; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; } .portal-footer button:hover { border-color: var(--ink); } /* --- The report page (SAAS-43) ----------------------------------------- */ /* No cap. This page carries the widest thing in the product — the commission report runs to ten columns — and every pixel withheld here is a column pushed off the right edge while empty viewport sits beside it. */ .portal-reports { max-width: 100%; } /* The "Run a report →" link that used to sit here is gone (SAAS-54) — the sidebar is the way between Surfaces now, and a second route to Reports on one page is a menu that disagrees with itself about where navigation lives. */ .report-form { display: grid; grid-template-columns: minmax(18rem, 2fr) minmax(14rem, 1fr) minmax(14rem, 1fr); gap: var(--s5) var(--s6); align-items: start; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); padding: var(--s4) var(--s5); margin-bottom: var(--s5); } .report-form .field > label, .report-form .field > .field-head > label, .report-form .custom-range label { display: block; font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: var(--s1); } .report-form select, .report-form input[type="search"], .report-form input[type="date"] { width: 100%; box-sizing: border-box; padding: var(--s2); font: inherit; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); } /* The open dropdown is painted by the platform, not the page: a transparent select leaves the list on the OS default white while `color: inherit` hands it the page's light-on-dark text, so in dark mode every option but the highlighted one renders white on white. Pin the list to the system field colours, which follow `color-scheme` in both themes. The closed control stays transparent. */ .report-form select option { background: Field; color: FieldText; } /* Secondary: Select all / Clear. Outlined, because they sit beside the one filled control on the page and two filled buttons would give a reader no way to tell which one runs the report. */ .report-form button:not(.info-mark-button) { padding: var(--s2) var(--s4); font: inherit; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; } .report-form button:not(.info-mark-button):hover:not(:disabled) { border-color: var(--ink); } /* Run report — the page's one action, and the only filled thing on it. */ .report-form button.primary { font-weight: 600; padding: var(--s2) var(--s5); border-color: transparent; background: var(--action); color: var(--on-action); } .report-form button.primary:hover:not(:disabled) { background: var(--action-hover); border-color: transparent; } .report-form button:not(.info-mark-button):disabled { opacity: .5; cursor: default; } /* --- The report list, beside the form (SAAS-133, ADR 0024 ruling 6) ----- The drop-down is gone. Darius ruled this shape from a rendered comparison against a grouped drop-down with a star beside it: forty reports and favourites are both about FINDING, and a list you can see and search beats one you must open. ~300px is the ruled comparison's own figure, carried over rather than re-derived. A name too long for it WRAPS rather than being clipped — nothing here sets `white-space`, and `.nm` is a flex row with `min-width: 0` so the name may shrink and fold — which matters because the standard set runs to names like "Appointment Attendance and No-shows" and a clipped report name is a report a reader cannot tell from its neighbour. Under 900px the column becomes a row above the form: two 300px-ish columns do not fit a phone, and a list squeezed to 40% of a 375px screen is worse than one that simply comes first. */ .report-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s5); align-items: start; } /* ⚑ A SCREEN RULE (SAAS-467). Unqualified, this block also matched a printed A4 or Letter page (718 to 739px wide, both under 900) and stacked the list above the form on paper, where the two columns fit: the page's own sentence "Choose a report on the left." then pointed at a list printed ABOVE it. Printed at A4 portrait as it was and with the block under `screen` (the SAAS-458 harness), the stacked sheet is the phone's arrangement and the scoped one the desktop's, whole and unclipped. Paper is not a phone. */ @media screen and (max-width: 899.98px) { .report-split { grid-template-columns: minmax(0, 1fr); } } .report-list { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); /* Bounded and scrolled rather than as long as the library: the form beside it must stay on screen while a reader hunts, which is the whole advantage of the split. */ max-height: 32rem; overflow: auto; } /* Inert while a run is in flight, exactly as the drop-down was disabled mid-run: swapping the report under a spinner that names the old one is a screen disagreeing with itself. The page refuses the click too — this only says so. */ .report-list.busy { opacity: .6; pointer-events: none; } /* The search box's label. Present for a screen reader and off-screen for everyone else: the placeholder is the visible label here, and a placeholder is not a label. */ .report-list .find-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .report-list .find { position: sticky; top: 0; z-index: 2; width: 100%; box-sizing: border-box; padding: var(--s2) var(--s3); border: 0; border-bottom: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface); color: var(--ink); font: inherit; } /* One Report Category, or the pinned group. Sticky under the search box so a reader scrolling forty rows always knows which shelf they are on. */ .report-list .group { position: sticky; top: 2.35rem; z-index: 1; margin: 0; padding: var(--s3) var(--s3) var(--s1); background: var(--surface); font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* ★ Favourites. The heading wears the star's own colour because the group IS the star's consequence — 5.43:1 on --surface, measured. */ .report-list .group.fav { color: var(--star); } .report-list ul { list-style: none; margin: 0 0 var(--s2); padding: 0; } .report-list li { display: flex; align-items: center; gap: var(--s1); padding-right: var(--s2); } .report-list li:hover { background: var(--row-hover); } /* The row itself is a link to this page carrying `?report=`, so the choice survives a reader with no script and the address can be bookmarked. It is laid out as a row rather than as a link because that is what it behaves like. */ .report-list li .nm { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) 0 var(--s2) var(--s3); color: var(--ink); text-decoration: none; } .report-list li .nm:hover { text-decoration: none; } .report-list li .nm .n { min-width: 0; } /* The chosen row. --teal-deep on --teal-wash measures 6.35:1 light and 7.98:1 dark. */ .report-list li.sel { background: var(--teal-wash); } .report-list li.sel .nm { color: var(--teal-deep); font-weight: 600; } /* "· custom", visible BEFORE the report is picked — the open list's one advantage over the drop-down that a drop-down could not have had, because a native option list will not promise to honour a colour. 6.62:1 on --surface, 5.87:1 on a selected row. */ .report-list li .c { flex: none; font-size: var(--t-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--scope-custom); } /* The star. UNLIT IS --muted, NOT --border-strong. The rendered comparison used the border hue, which measures 1.47:1 against --surface — an interactive control's only state indicator, effectively invisible. --muted is 4.97:1 on --surface and 4.41:1 on a selected row: above the 3:1 a non-text state indicator owes, and the correction is the one thing on this control that is not the mock's. Lit is --star, measured with the token. */ .report-list li .st { flex: none; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; font-size: var(--t-lead); line-height: 1; padding: var(--s1) var(--s2); } .report-list li .st.on { color: var(--star); } .report-list li .st:hover { color: var(--star); } .report-list .empty { margin: 0; padding: var(--s4) var(--s3); } /* The form's own column. Two fields wide now that the picker has left it — scoped to this page, because .report-form is shared verbatim with the Day End Surface, which still has three. */ .portal-reports .report-form { grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr); margin-bottom: 0; } /* The chosen report, heading the form it belongs to. */ .report-side .chosen { margin-bottom: var(--s4); } .report-side .chosen .t { margin: 0 0 var(--s1); font-size: var(--t-h2); color: var(--ink-strong); } .report-side .chosen .description { margin: 0; color: var(--muted); max-width: 62ch; } .report-pick .description { margin: var(--s2) 0 0; color: var(--muted); max-width: 52ch; } /* Standard or this clinic's own — the difference between "a report" and "our report". */ .scope { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 0 var(--s2); margin-right: var(--s2); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .scope.custom { color: var(--scope-custom); border-color: color-mix(in srgb, var(--scope-custom) 40%, transparent); background: color-mix(in srgb, var(--scope-custom) 8%, transparent); } .custom-range { display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s2); } .custom-range label { margin-bottom: 0; } .resolved { margin: var(--s2) 0 0; font-size: var(--t-body); } /* Wrap the row, never the labels inside it. Inter is wider than the system fonts this row was laid out against, so after SAAS-49 the three items no longer fitted the Branches column and flex compensated by squeezing the buttons until "Select all" broke across two lines. A button whose own label wraps reads as broken; a row that moves its last item to the next line reads as a layout. */ .select-all { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s2); } .select-all button { white-space: nowrap; flex: 0 0 auto; } /* "Separate each branch" (SAAS-391), under the branch list whose reading it changes. No sizing and no clipping of any kind: this sits inside the branch selection, which SAAS-380 took the pane away from, and anything that scrolled here would clip the freshness tooltip again. */ .separate-branches { margin: var(--s2) 0 0; font-size: var(--t-body); } .separate-branches label { display: flex; align-items: center; gap: var(--s2); text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; margin: 0; } .separate-branches .small { display: block; margin-top: var(--s1); } /* ⚠ THE BRANCH SELECTION IS NOT A PANE, AND THAT IS SAAS-380's WHOLE FIX. ========================================================================= It used to cap itself at `max-height: 17rem` with `overflow-y: auto`. Darius, 2026-09-19, having watched the freshness sentence open inside it: "the mouse over should expand outside of the pane, now its buggy because its inside a pane, or just put the whole branch selection outside." HE OFFERED TWO REMEDIES AND THEY TURNED OUT TO BE ONE. The first — make the hover escape the pane — is not buildable while the pane exists: a box cannot escape an ancestor that scrolls, because `overflow` clips every descendant whose containing block lies inside it, so no amount of `position: absolute` gets the sentence out. Escaping a live scroll container needs `position: fixed` with anchor positioning, or the top layer through `popover` — which opens on a CLICK, not the hover he asked for. SO THE SECOND REMEDY IS WHAT DELIVERS THE FIRST. Take the pane away and an ordinary absolutely positioned tooltip simply works, with no second layout and nothing to maintain. He asked for exactly that one message later — "put this inside a mouse over" — and it was already available, because of this. See `.stale-marker-tip`. WHAT THE CAP WAS WORTH, COUNTED RATHER THAN ARGUED. 17rem is 272px and a row is about 29px, so it bit at ten clinics. The largest Tenant in the fleet holds ELEVEN. The cap therefore bought about 60px of page height, on one Tenant, in exchange for a scroll container wrapped around the one control on the page that has something to open inside it. AND THE SIDEWAYS CLIP WENT WITH THE CAP, WHICH IS NOT TIDYING EITHER. SAAS-375 wrote `overflow-x: clip` here against a horizontal scrollbar nobody had declared — it arrived because `overflow-y: auto` coerces a `visible` on the other axis to `auto`. With no cap there is no non-`visible` value left to coerce it, so the scrollbar cannot recur. And `clip` had to go anyway: a clip is a clipping CONTEXT, and the freshness sentence is now a layer anchored to a row inside this list, so `clip` would have cut it off sideways exactly as `auto` cut it off vertically before. An uncapped list overflows VISIBLY, which for a tooltip is the whole point and for a clinic name never arises, because names wrap. ⚠ SO THE RULE BELOW CARRIES NO SIZING AND NO OVERFLOW AT ALL, and the emptiness is the promise rather than an omission. Write a height cap or an overflow of any kind on either axis and this becomes a scroll container again, the tooltip is clipped, and SAAS-375 and SAAS-380 both come back. BranchPickerScrollTests asserts the absence directly, so it fails rather than the page. */ ul.branches-select { list-style: none; margin: 0; padding: 0; } ul.branches-select label { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; margin: 0; } ul.branches-select label.moved { color: var(--muted); } .run { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s4); } /* The running indicator. DAOv4 blocked the whole tab; the elapsed counter ticking beside this spinner is the page demonstrating that it does not. */ .running { display: inline-flex; align-items: center; gap: var(--s2); } .spinner { width: .9rem; height: .9rem; border: 2px solid var(--line); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* The report's one Filter Variable (SAAS-147). It sits in the form's grid like the period and the branches, because it is the third thing a reader chooses about this run — and unlike either of them it may be left alone, which the hint under it says rather than the layout. */ .filter-pick .muted { display: block; margin-top: var(--s1); } /* THE LOCK, where a doctor-restricted report's box would be (SAAS-148). Deliberately NOT styled to look like a disabled input: it is a sentence, because there was never a field here for this reader. It occupies the same slot in the form's rhythm as .filter-pick so the run form does not reflow depending on who is reading it. */ .filter-locked .locked { margin: var(--s1) 0 0; color: var(--ink); } .filter-locked .locked strong { /* The one word that answers "narrowed to what?", carried in the chrome's own teal so it reads as a stated fact about this run rather than as the placeholder text of an empty box. */ color: var(--teal-deep); } .filter-locked .muted { display: block; margin-top: var(--s1); } /* What the table below was narrowed to, said over the table rather than only in the file. A reader who scrolled back to a result must not mistake one doctor's rows for the clinic's. */ .ran-header p.ran-filter { /* Pulled up under the period line rather than spaced from it: the two are one block of metadata about the same run, and `.ran-header p` has already put a gap below that one. */ margin: calc(var(--s4) * -1) 0 var(--s4); color: var(--muted); } .ran-header p.ran-filter strong { color: var(--ink); } /* The report's own name on the results page: a section heading, one step under the page title and one above the per-Branch blocks. */ .ran-header h2 { font-size: var(--t-h2); letter-spacing: -.014em; margin: 0 0 var(--s1); } .ran-header p { margin: 0 0 var(--s4); } /* The Excel export (SAAS-45, and the Day End's in SAAS-96) — written from the result already on screen, never a second run. One rule for both surfaces rather than a copy under .doc-masthead: the two buttons do the same thing and a reader who has used one should recognise the other. A second block would be a second place "what an export button looks like" lives, free to drift the way the two stylesheets this product deliberately does not have would have. */ p.download { display: flex; align-items: center; gap: var(--s2); } /* THE MARK BESIDE THE BUTTON (SAAS-478, fresh-eyes review 2026-10-08). The download's information mark is the paragraph's next sibling, so the shared `p:has(+ .info-mark)` rule should put the two on one line — but `p.download` above has the same specificity and comes later, so the paragraph stayed a flex BLOCK and the mark fell to the line under the button, on Reports and on Day End, after every run. Inline here, with the higher specificity, and the flex row inside it is kept. */ p.download:has(+ .info-mark) { display: inline-flex; vertical-align: middle; } p.download button { padding: var(--s2) var(--s4); font: inherit; font-weight: 600; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; } p.download button:hover:not(:disabled) { border-color: var(--ink); } p.download button:disabled { opacity: .5; cursor: default; } /* The Day End's sits under the masthead rather than beside a heading, so it needs the gap the .ran-header paragraph rule was giving the other one. */ .doc-masthead p.download { margin: var(--s3) 0 0; } /* --- The report result (typeset in SAAS-50) ----------------------------- */ /* This is the product's real surface — dense, numeric, money — and until now it had had no typographic attention at all. The rules below are one idea in six places: a financial table is read *down* its columns, so the page has to hold a column together (one alignment, tabular figures, headings that stay put) and then say which block a reader is in (a branch name that outranks the column headers, and — since SAAS-55 — a summary band above them all that outranks every branch). All of it is achromatic. The design system spends colour on exactly two things — the one primary action, and status — and "this row is the total" is neither, so weight, a rule and a wash of ink carry it, exactly as the sidebar marks the page you are on. */ .report-results .branch-block { margin: 0 0 var(--s6); } /* The branch name is a heading, not a caption. It was .95rem — *smaller* than the page's own body text — so nine blocks repeated at one weight gave a reader scanning for one branch nothing to land on. At 1.05rem/650 over column headers of .8rem uppercase muted, the hierarchy inside a block is unambiguous: the branch owns the block, the columns merely describe the table. */ .report-results .branch-block h3 { font-size: var(--t-h3); font-weight: 650; letter-spacing: -.01em; color: var(--ink-strong); margin: 0 0 var(--s2); padding-bottom: var(--s1); border-bottom: 1px solid var(--border-strong); } /* Left as SAAS-43 set it, deliberately: a Branch that could not be read is a *status*, which is one of the two things this palette spends colour on. It is worth a ruling all the same — SAAS-51 made the dashboard's stated conditions achromatic, on the grounds that "no report credential" is the absence of a measurement rather than a fault, and these are the very same conditions (NotMinted, Superseded, ExecutionFailed) wearing amber on this page. */ .report-results .branch-block.refused h3 { color: var(--warn); } /* Tabular figures on the whole table rather than on the numeric columns alone. `td.num` is the obvious scope and it is too narrow: a date column is a column of digits that MySQL hands back as a DateTime, so it is never "numeric" and would keep proportional figures while the money beside it lined up. This is what self-hosting Inter was for. */ .report-results table.report { font-size: var(--t-body); font-variant-numeric: tabular-nums; } /* A column carries one alignment down its whole length, heading included. The heading half of this rule was written in SAAS-43 and never once matched: the component rendered no class on any `th`, so every money column in the product had a left-aligned heading sitting over right-aligned figures. Which columns these are is decided once per result, in ReportValueText.NumericColumns, so one null cannot flip a cell out of its column. The leading gutter is for the money-beside-a-count case: two right-aligned columns otherwise leave only the trailing .75rem between the last digit of one and the first of the next, and a count of 502 reads as part of the total it sits against. */ .report-results td.num, .report-results th.num { text-align: right; padding-inline-start: var(--s5); } /* The column meanings survive a long branch. Two things make this work, and both are load-bearing. The scroll box moved *into* the block. A sticky element is positioned against its nearest scroll box, and `overflow-x: auto` computes `overflow-y` to `auto` too — so the old stack-wide `.report-results { overflow-x: auto }` was a scroll box of exactly content height, which never scrolls vertically and against which a sticky heading therefore never moves. Measured before the move, with the sticky rules already in place: scrolling 900px moved the heading 900px, i.e. it did nothing at all. And the box is capped, so that it scrolls in the first place. A block shorter than the cap is untouched — the collections report's five rows a branch never becomes a scroll pane — while the commission Custom's 1,206-row Puri block gets a scrollport of its own and keeps its headings. A report is still as wide as its columns, and the commission Custom is 24 of them, so this box goes on carrying the horizontal scroll the stack used to: a table that pushes the whole page sideways is worse than one that scrolls inside itself, which is what .site-main's `min-width: 0` makes possible. */ .report-results .block-scroll { overflow: auto; } @media (min-width: 768px) { /* Wide screens only. Below the breakpoint the box still scrolls sideways but is never capped, so vertical scrolling stays the page's — a thumb trapped in a 70vh box that also scrolls horizontally is a worse bargain than losing the headings, and on one column the headings are the shorter journey back anyway. */ .report-results .block-scroll { max-height: 70vh; } } .report-results thead th { position: sticky; top: 0; z-index: 1; /* Opaque, or the rows read straight through the headings as they hold. */ background: var(--page); /* `border-collapse: collapse` gives the rule to the table rather than to the cell, so a sticky heading leaves its own underline behind on the row it detached from. An inset shadow is painted by the cell and travels with it. */ border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); } /* A document, not an app grid: the row under the pointer lifts by three and a half percent of ink, and nothing else. No zebra — that would draw sixty horizontal bands the data does not have. Scoped to a Branch's own rows, because hovering the only row of the totals table says nothing. */ .report-results .branch-block.ran tbody tr:not(.subtotal-row):hover td { background: var(--row-hover); } /* --- Subtotal by (SAAS-395) ------------------------------------------------ */ /* A subtotal row closes one value's lines inside a Branch block. It takes the band's own idiom at a smaller scale — weight and the same 3% wash of ink, achromatic for the reason at the top of this section — so it reads as a sum and never as one more line. No heavier rule above it: a doctor list of fourteen would draw fourteen, and the band's full-strength rule is kept for the one row that is the fleet's. Not lifted on hover: like the fleet row, it is not a line to compare against its neighbours. */ .report-results tr.subtotal-row td { font-weight: 650; color: var(--ink-strong); background: color-mix(in srgb, var(--ink) 3%, transparent); } /* The label sits in the subtotal column itself — "drani Total (54 lines)" — and is not allowed to wrap: a label broken over two lines doubles the row's height at every value. */ .report-results tr.subtotal-row td.subtotal-label { white-space: nowrap; } /* The band's second table, "All branches by Issued by": a heading one step below the band's own, so it reads as part of the band rather than as a block of its own. */ .report-results .branch-block.summary h4.by-value { font-size: var(--t-lead); font-weight: 650; color: var(--ink-strong); margin: var(--s5) 0 var(--s2); } /* --- The summary band (SAAS-55) ---------------------------------------- */ /* The band answers the question the page could not: what did each branch take. One table above the blocks — a row per branch over the summable columns only, with the fleet total as its last row. The separate "All branches" block is gone rather than sitting beside it, because two places stating one fleet total is the redundancy the band exists to remove. Its treatment is that block's, moved: a wash of ink, a heading a size above the branches' own, and a full-strength rule above the fleet figure. Achromatic throughout, for the reason at the top of this section — "this is a subtotal" is neither the page's one primary action nor a status, so weight, a rule and a wash carry it. The wash is 3% where the totals block carried 4%. It runs behind nine rows here rather than one, and it sits above the detail rather than under it: the same value that read as emphasis on a one-row block reads as a panel the eye stops at when it is nine rows tall at the top of the page. 3% keeps it the same document, emphasised. */ .report-results .branch-block.summary { margin-bottom: var(--s7); padding: var(--s4) var(--s5) var(--s4); border-radius: var(--r-lg); background: color-mix(in srgb, var(--ink) 3%, transparent); } .report-results .branch-block.summary h3 { font-size: var(--t-h3); border-bottom-color: var(--ink); } /* The wash sits behind the headings too, so their opaque background has to be the wash composited against the page rather than the page itself — otherwise a heading holding inside the band paints a lighter rectangle over the block it belongs to. And the headings are ink here rather than muted, which is a contrast fix before it is a design choice: SAAS-50 measured muted grey at 4.68:1 on the page and 4.32:1 with a wash behind it, and 12.8px text owes 4.5:1. Ink clears it with room to spare — and it is the right answer anyway, since this is the block meant to read strongest on the page. */ .report-results .branch-block.summary thead th { background: color-mix(in srgb, var(--ink) 3%, var(--page)); color: var(--ink); } /* The fleet total is not one of the branches above it — it is what they add up to — so a full-strength rule separates it, which is the idiom a financial statement uses above a total. */ .report-results .branch-block.summary tr.totals-row td { border-top: 2px solid var(--ink); } /* A branch that could not be read carries its stated condition where its figures would be — never a blank, and never a zero, which would claim it collected nothing. Ink rather than muted, for the contrast reason above, and normal weight so a sentence is never mistaken for a figure. It wraps rather than truncating: an execution failure carries MySQL's own words, and clipping them to keep the band tidy would hide the only thing that says what went wrong. */ .report-results .branch-block.summary td.stated { color: var(--ink); font-weight: 400; font-size: var(--t-body); } /* The band is read *across* a row — this branch, its transactions, its money — where a block is read down a column. So the row under the pointer lifts, exactly as a branch's own rows do. Not the fleet row: it is the one row with nothing to compare it against. */ .report-results .branch-block.summary tbody tr:not(.totals-row):hover td { background: var(--row-hover); } /* The withheld fleet total, stated inside the band where its row would have been. */ .report-results .branch-block.summary p.no-totals { margin: var(--s4) 0 0; } /* The figure an owner came for is not the same size as the rows above it. */ .report-results tr.totals-row td { font-size: var(--t-lead); font-weight: 650; color: var(--ink-strong); border-bottom: 0; } /* The report form is three columns of 18rem/14rem/14rem — 50rem of minimums, which no phone has. One column under the breakpoint, for the same reason the nav becomes a drawer there. */ @media (max-width: 767.98px) { .report-form { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s4); } /* And the report page's own two, which SAAS-133 scoped more specifically than the rule above so that the Day End Surface could keep three. Specificity does not care that this one is in a media query, so the narrow case has to be scoped the same way or the phone keeps two columns of 12rem on a 375px screen. */ .portal-reports .report-form { grid-template-columns: minmax(0, 1fr); } .run { flex-wrap: wrap; } } /* The three boxed statements: a whole run that refused, a form that could not run, and the all-branches total the Runner withheld. Each is a sentence a reader has to actually read. The ink is set here rather than inherited, and that is an accessibility fix carried in from SAAS-50's measuring rather than something that ticket asked for. These boxes take their colour from `p.stated`, which is `--muted` — right on the page, but these three put an amber wash behind it, and 13.6px muted grey on that wash measures 4.23:1 in the light theme, under the 4.5:1 that size owes. In ink on the same wash it is 15.11:1. The wash and the border still say which kind of statement it is; only the sentence itself got darker. */ p.run-refused, p.run-problem, p.no-totals, p.stale-notice, p.subtotal-stale { border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--ink); border-radius: var(--r-sm); padding: var(--s2) var(--s3); max-width: 70ch; } /* The per-Surface freshness notice (SAAS-76). It joins the three boxed statements above rather than inventing a fourth look, because it is the same kind of sentence they are: something the product will not do, said in words, in the block it applies to. Inheriting their ink fix matters here too — the same 4.5:1 argument, the same wash. Sits inside a branch block and above its table, so it needs the gap the boxed three do not. */ p.stale-notice { margin: 0 0 var(--s4); } /* A Subtotal by the run did not return (SAAS-395): one of the boxed statements above, since it is the same kind of sentence — something the page will not do, said in words — and it stands above the band, where the subtotals would have begun. */ p.subtotal-stale { margin: 0 0 var(--s4); } /* "Not measured yet" is not a warning. A Surface with no probe is an absence, and painting it amber would make Daclaria's own gap look like the clinic's — the same argument the dashboard's achromatic `.notice` pill already makes one screen away. */ p.stale-notice.unmeasured { border-color: var(--border-strong); background: none; color: var(--muted); } /* --- "Copy synced" (SAAS-212, ADR 0031 ruling 2) ------------------------ */ /* THE LINE IS QUIET BY DESIGN, and the ruling is the reason: "never a badge". It is on every Surface on every load, so it has to read as a caption under the heading rather than as an alert — a standing fact competing with the page's own content is a fact readers stop seeing by the third page, which would cost it exactly the job it was added for. Small, muted, and directly under the h1 it qualifies. No border, no wash, no pill: the boxed amber above is for sentences about something being WRONG, and most of the time this one is not. */ p.copy-synced { margin: calc(var(--s2) * -1) 0 var(--s4); font-size: var(--t-small); color: var(--muted); } /* The one state where it does raise its voice — the copy is behind, or its runs are failing. Still not a badge: the same line, in the ink the rest of the page warns in, so it changes weight without changing shape or moving anything under it. */ p.copy-synced.wants-attention { color: var(--ink); font-weight: 600; } /* The branch list's sync column. It used to be told not to out-shout the pill beside it; since SAAS-390 it is the column that shouts, and the pill does not shout at all. Quiet by default all the same — most rows are healthy — and the two rules that raise its voice are up beside the freshness table's own washes, keyed on the row's SyncConcern rather than on a boolean this cell used to carry. */ td.copy-synced-cell { color: var(--muted); white-space: nowrap; } /* --- The Patients Surface and the shared pager (SAAS-68) ---------------- */ /* No cap, for the reason the report page has none: this is a six-column table read across, and capping it is what put the sidebar in the middle of the screen. */ .portal-patients { max-width: none; } /* The branch picker and the search (SAAS-69). Nine controls now rather than one, so it is a grid that reflows rather than a row: `auto-fit` with a 14rem floor gives four columns on a desktop, two on a tablet and one on a phone with nothing to declare per breakpoint. It still wraps rather than pushing the page sideways, which is the rule that mattered when it was one control. */ .register-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; gap: var(--s3) var(--s4); margin: 0 0 var(--s5); padding: var(--s4) var(--s5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); } .register-form .field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; } /* A pair of bounds is one control with two ends, so it takes two cells where there are two to take and folds into one where there are not. */ .register-form .field-range { grid-column: span 2; } @media (max-width: 719px) { .register-form .field-range { grid-column: span 1; } } .register-form .range { display: flex; align-items: center; gap: var(--s2); } .register-form .range input { flex: 1 1 0; min-width: 0; } .register-form .range-to { flex: 0 0 auto; font-size: var(--t-small); color: var(--muted); } /* Said once, under the control it is about. The wrap is the least guessable thing on this page: without it an Owner asking for 25 Dec to 5 Jan cannot tell whether they will get twelve days or nothing at all. */ .register-form .hint { margin: var(--s1) 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--muted); } /* The buttons sit on their own row under the grid, so "Search" is never stranded in a cell beside a date box at one width and under it at the next. */ .register-form .actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); margin-top: var(--s1); } /* A link, not a second button. Clearing a search is a way back rather than an action of its own, and two buttons side by side would ask a reader which one they meant. */ .register-form .clear { font-size: var(--t-body); color: var(--muted); } .register-form .clear:hover { color: var(--ink); } .register-form input[type="search"], .register-form input[type="date"] { width: 100%; min-width: 0; padding: var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; } /* What the register was narrowed to, read back. Muted, because it describes the table rather than competing with it — the same weight the pager's own count carries. */ .portal-patients .narrowed { margin: 0 0 var(--s3); font-size: var(--t-body); line-height: 1.5; color: var(--muted); } .register-form label { font-size: var(--t-small); font-weight: 600; letter-spacing: .01em; color: var(--muted); } .register-form select { width: 100%; padding: var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; } /* The open dropdown is painted by the platform, not the page — the report form's own rule. */ .register-form select option { background: var(--surface); color: var(--ink); } /* Outlined, not filled. Showing a register is not a page's one primary action; it is how a reader gets to the thing the page is for, and a filled button here would compete with nothing. */ .register-form button { padding: var(--s2) var(--s4); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; } .register-form button:hover { background: var(--row-hover); } /* Whose register this is. A heading rather than a caption — the same call SAAS-50 made for the report blocks, where the branch name had been smaller than the page's own body text. */ .portal-patients h2.branch-name { margin: 0 0 var(--s2); font-size: var(--t-h3); font-weight: 650; color: var(--ink-strong); } /* Six columns of names, dates and phone numbers have a min-content width no phone has. The table scrolls inside its own box so the page's own scrollWidth stays at the viewport — the rule the dashboard and the report results already keep, made possible by .site-main's min-width: 0. */ .register-scroll { overflow: auto; } /* And the box is capped, which is what makes the sticky headings below work at all — SAAS-50's finding, reproduced here before it was fixed. A sticky element is positioned against its nearest scroll box, and `overflow-x: auto` computes `overflow-y` to `auto` as well, so an uncapped box is a scroll box of exactly content height: it never scrolls vertically, and nothing can ever stick against it. Measured with the sticky rules already in place and no cap — scrolling the page 400px moved the heading 400px, which is to say it did nothing at all. Wide screens only, as there: below the breakpoint a thumb trapped in a box that also scrolls sideways is a worse bargain than losing the headings, and on one column the headings are the shorter journey back anyway. */ @media (min-width: 768px) { .register-scroll { max-height: 70vh; } } /* Tabular figures on the whole table, not on the numeric column alone: a birthday and a registration date are columns of digits that arrive as dates, so td.num would line up the patient numbers and leave three date columns ragged beside them. */ table.register { width: 100%; border-collapse: collapse; font-size: var(--t-body); font-variant-numeric: tabular-nums; } table.register th, table.register td { padding: var(--row-y) var(--s3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; } table.register thead th { position: sticky; top: 0; z-index: 1; /* Opaque, or the rows read straight through the headings as they hold. Composited against the page rather than left transparent, exactly as the report results learnt to be. */ background: var(--page); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); font-size: var(--t-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } table.register td.num, table.register th.num { text-align: right; } table.register td.patient-name { font-weight: 600; color: var(--ink-strong); } /* THE BRANCH COLUMN OF A REGISTER READ FOR SEVERAL CLINICS (SAAS-512). Darius, 2026-10-09: "many clinics at once, but add the branch name to the table if it is more than one branch". It leads the table, like the Clinic column of the Billing and Appointments lists, and a clinic's name is one unbroken line: it is the half of a row's identity that makes the patient number and the name readable at all (two clinics both hold a patient 10041). Ordinary ink and weight -- the patient's name is the handle and stays the heaviest thing on the row. */ table.register th.clinic, table.register td.clinic { white-space: nowrap; } /* A document, not an app grid: the row under the pointer lifts by three and a half percent of ink and nothing else. No zebra — fifty horizontal bands the register does not have. */ table.register tbody tr:hover td { background: var(--row-hover); } /* The heading is the control. A link, because the sort lives in the address bar, and it fills the cell so the whole heading is the target rather than the word inside it. */ table.register th a.sort { display: inline-flex; align-items: center; gap: var(--s1); color: inherit; text-decoration: none; } table.register th a.sort:hover { color: var(--ink); } /* The chevron. Hidden until the column is sorted, hovered or focused, so six headings are not six arrows competing for the reader's attention with the one that means something. */ table.register th .chev { width: .5rem; height: .5rem; border-right: 1.5px solid; border-bottom: 1.5px solid; opacity: 0; } table.register th .chev.up { transform: rotate(-135deg) translate(-1px, -1px); } table.register th .chev.down { transform: rotate(45deg) translate(-1px, -1px); } table.register th a.sort:hover .chev, table.register th a.sort:focus-visible .chev { opacity: .5; } /* Where the sort is, marked achromatically — full ink, weight 700, and the chevron shown. The design system spends colour on the one primary action and on status, and "this is the column you sorted by" is neither. */ table.register th.sorted { color: var(--ink-strong); font-weight: 700; } table.register th.sorted .chev { opacity: 1; } /* And a 3% wash of ink down the sorted column's whole length, so the marking survives a reader whose eye is halfway down the page. The same value the summary band uses. */ table.register th.sorted, table.register td.sorted { background: color-mix(in srgb, var(--ink) 3%, transparent); } /* The heading's wash sits on top of its own opaque background, or the rows would read through it as it holds — so it is the wash composited against the page rather than the wash alone. */ table.register thead th.sorted { background: color-mix(in srgb, var(--ink) 3%, var(--page)); } /* The name is the handle into one Patient's own page (SAAS-70), and it is drawn by `a.row-link` alone since SAAS-363 — the rule that used to sit here said `color: inherit; text-decoration: none` and waited for a hover, which is exactly the defect Darius reported. See A NAME THAT OPENS A THING for why the argument this cell once made — "the cell is already the heaviest ink in the row, so it reads as the thing to click without being told" — did not survive being read. */ /* --- One patient's own page (SAAS-70) ---------------------------------- */ /* Read down, not across. The register is a table because fifty rows are compared; one patient is a document, so this is the one Surface page that keeps the prose measure. */ .patient-detail { max-width: 60rem; } /* Back to where the reader came from, above the name rather than below the page — the browser's own back button is the fast path, and this is the one that survives a link somebody was sent. */ .patient-detail .crumb { margin: 0 0 var(--s1); font-size: var(--t-body); } .patient-detail .crumb a { color: var(--muted); text-decoration: none; } .patient-detail .crumb a:hover { color: var(--ink); text-decoration: underline; } /* The drill-downs out of a patient (SAAS-81, joined by SAAS-176's two). It was one link and is now up to three, so they need to be separated and to wrap rather than run together on a phone. A row of links and not a row of buttons: each one is a destination with an address, and the crumb above already established that this page navigates with links. */ .patient-detail .drill-down { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s4) 0 0; } .patient-detail .drill-down + .hint { margin: var(--s1) 0 0; } .detail-group { margin: var(--s5) 0 0; padding: var(--s4) var(--s5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); } .detail-group h2 { margin: 0 0 var(--s3); font-size: var(--t-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } /* Label beside value, and the label column sized to the longest label rather than to a guess — a grid whose first track is max-content cannot leave a caption wrapping over two lines beside a short value. Values carry tabular figures because most of them are numbers, dates or phone numbers read against each other down the column. */ .detail-group dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s5); margin: 0; font-variant-numeric: tabular-nums; } .detail-group dt { color: var(--muted); font-size: var(--t-body); } .detail-group dd { margin: 0; color: var(--ink-strong); overflow-wrap: anywhere; } /* The staff login code beside the name a receipt's three actor fields now draw (SAAS-143). Muted and a step smaller, so the name is what the eye lands on and the code is there for the reader who needs to say it back to the desktop system or type it into the Raised by filter. It is a sibling of the value rather than a second `dd`: the pair is one answer to one question, and two `dd`s under one `dt` would put a blank cell opposite the code in the label-over-value phone layout above. */ .detail-group dd .staff-login { margin-left: var(--s2); color: var(--muted); font-size: var(--t-small); white-space: nowrap; } /* THE NOTE THE DESK LEFT ON THE BILL keeps the breaks it was typed with (SAAS-470, found by the fresh-eyes review of 2026-10-08): about 20,550 live Puri Indah bills carry a break inside their Remark, and the generic `dd` collapsed every one to a space. pre-line, not pre, for the patient notes' reason below: the stored breaks are kept and a long line still wraps to the column. The markup draws the value alone on one line, so the template's own whitespace adds no blank lines. */ .detail-group dd.remark { white-space: pre-line; overflow-wrap: anywhere; } /* On a phone the two-column pair becomes label-over-value: an address beside a caption in a 375px viewport is a column four characters wide. */ @media (max-width: 767.98px) { .detail-group dl { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } .detail-group dd { margin-bottom: var(--s2); } } /* The standing notes (SAAS-70, ruled 2026-08-13). Stacked blocks rather than the label-beside-value grid the rest of the page uses, because these are the only free text on it: `remark` is filled on 16,156 of Puri Indah's 18,591 live rows and 10,472 of those carry a line break, so a value column four characters from a caption would be unreadable and the breaks would be lost. */ .patient-notes h3 { margin: 0 0 var(--s1); font-size: var(--t-body); font-weight: 400; color: var(--muted); } /* pre-line, not pre: the stored breaks are kept and the long lines still wrap to the column, which is what a 330-character note typed into a fixed-width desktop textbox needs. No tabular figures either — this is prose, and the rest of the page's numeric alignment would only widen its spaces. */ .patient-notes .note { margin: 0 0 var(--s4); color: var(--ink-strong); white-space: pre-line; overflow-wrap: anywhere; } /* A VISIT'S CLINICAL NOTES, ON ONE RECORD'S PAGE AND ON THE RECORDS LIST (SAAS-470) — for the same reason as the standing notes above. They had no rule at all, so every break a clinician typed collapsed to a space and a note written as a list read as one paragraph; Darius, 2026-10-03: "medical record texts also lose its line break". Only the breaks: the dl's own spacing is the detail-group's, and TypedTextKeepsItsBreaksTests holds every block of typed text to this. */ .record-notes .note { white-space: pre-line; overflow-wrap: anywhere; } .patient-notes .note:last-child { margin-bottom: 0; } /* --- The pager --------------------------------------------------------- */ /* One of these per paged block. On a multi-Branch Billing page there will be eight, so nothing here may assume it is the only one on the screen or that it sits at the foot of the page. */ .pager { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin: var(--s3) 0 0; } .pager .figures { font-variant-numeric: tabular-nums; } .pager p { margin: 0; font-size: var(--t-body); color: var(--muted); } .pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: 0; padding: 0; list-style: none; order: 2; } /* Every page number renders at one width per digit count, so the strip does not twitch as a reader moves through it. Measured in SAAS-61: six 3-digit numbers at one width with tabular figures, and six different widths without. */ .pager .page, .pager .step { display: inline-block; min-width: 2rem; padding: var(--s1) var(--s2); border: 1px solid transparent; border-radius: var(--r-sm); font-size: var(--t-body); text-align: center; text-decoration: none; color: var(--ink); } .pager a.page:hover, .pager a.step:hover { background: var(--row-hover); border-color: var(--border); } /* Where you are. A wash of ink, a border of ink, and weight — the same wash-and-weight idiom the sidebar's current page and the summary band use, and for the same reason: colour is not spent on which page you are on. */ .pager .page.current { background: color-mix(in srgb, var(--ink) 9%, transparent); border-color: color-mix(in srgb, var(--ink) 25%, transparent); font-weight: 650; color: var(--ink-strong); } /* Previous and Next at the ends of the run, and wider than a number because they are words. */ .pager .step { min-width: auto; padding-inline: var(--s2); } /* A step a reader cannot take is present and quiet rather than absent: the strip would otherwise change width between page 1 and page 2 and shift every number under the pointer. */ .pager .step[aria-disabled="true"] { color: var(--muted); opacity: .55; } .pager .gap { padding-inline: var(--s1); color: var(--muted); } .pager-count { order: 1; } .pager-where { order: 3; } /* Under the breakpoint the three parts of the pager stack rather than competing for one line, and the count reads above the numbers it describes. */ @media (max-width: 767.98px) { .pager { justify-content: flex-start; } .pager-pages { order: 3; width: 100%; } .pager-where { order: 2; } } /* ----------------------------------------------------------------------------- A form as a dialog over its list (SAAS-115) Darius ruled the shape on 2026-08-22: "the entry / edit form shouldn't be below the tables — it should be either a new popup window or a new url", and what he took from the rendered comparison was the modal. Written here rather than inside .portal-people because the operator screens take the same convention (SAAS-120/121/124), and one sheet is the whole point. The class lost its realm in SAAS-121, when the Operator screens started using it: `.portal-dialog` is `.form-dialog`. Nothing in the block names a colour of its own — every value is a shared token — which is what lets an /operator page inherit the whole treatment without operator.css adding a line, and it is the same rule OperatorStylesheetTests holds that sheet to. THE TWO OPEN STATES ARE NOT THE SAME ELEMENT STATE, and that is what most of this block is about. `open` on its own is NOT modal: no top layer, no ::backdrop, no focus trap, and the page behind stays live. That is the state the server renders — a no-script open, or the round-trip that carries a refusal back — and it has to look finished on its own, because dialogs.js is polish and every write lands without it. So [open] fixes the panel to the viewport and draws its own scrim with a 100vmax spread shadow, and :modal — which showModal() produces — drops that stand-in, because ::backdrop is painting the real one. The one thing the no-script state cannot have is the page behind going inert; that is showModal()'s alone, and it is the honest cost of the baseline. */ .form-dialog { box-sizing: border-box; width: min(34rem, calc(100% - var(--s6))); max-height: calc(100dvh - var(--s7)); overflow: auto; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--e2); } /* THE WIDE VARIANT (SAAS-134). A form is narrow because a form field is narrow, and every dialog here was a column of fields until the Granted Reports dual list arrived. That control is not a field: its two lists have to show a report's whole name, and at 34rem each of them got about 150px, so every name was cut mid-word — which is what Darius found in the SAAS-132 click-through. DARIUS RULED THE TRADE on 2026-08-24 — the wider panel, and the longest live report name renders whole — and 70rem is what that costs when it is measured rather than estimated. The name is "Kidz Dental APD VS Doctor Fee VS Treatment and Product · custom", which needs 413.5px of text. 900px offered 328px and 1050px was the first estimate; measured, 1056px still fell 7.5px short and 1072px cleared it by half a pixel, which is not a margin. Per list the overhead is fixed at ~33px — Chrome reserves a 15px scrollbar gutter on a multi-select whether or not it scrolls, plus the select's 2px and the option's paddings — so the number had to come from the browser. 1120px leaves 24.5px of headroom, about 6%, and THAT is the point of picking it over the two steps below: `system-ui` is a different typeface on every platform — Segoe UI Variable here, SF Pro on macOS — and a 2% margin is one font substitution away from clipping again on a machine nobody measured on. THE CAP IS THE SAME EXPRESSION AS THE DEFAULT WIDTH'S, deliberately: whatever this variant asks for, it can never be wider than the viewport less the page's own gutter, so there is no width at which the panel itself starts a horizontal scroll. Below about 1152px the panel is capped by that rather than by 70rem and the margin narrows; below the stacking breakpoint the name clips again, which is what the title on every option is for. */ .form-dialog.wide { width: min(70rem, calc(100% - var(--s6))); } .form-dialog[open] { position: fixed; inset-block-start: var(--s7); inset-inline: 0; margin-inline: auto; z-index: 40; box-shadow: var(--e2), 0 0 0 100vmax rgba(11, 17, 32, .55); } .form-dialog:modal { box-shadow: var(--e2); } .form-dialog::backdrop { background: rgba(11, 17, 32, .55); } .form-dialog .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s4); border-bottom: 1px solid var(--line); } .form-dialog .dialog-head h2 { margin: 0; font-size: var(--t-h3); color: var(--ink-strong); overflow-wrap: anywhere; } .form-dialog .dialog-close { flex: 0 0 auto; display: inline-flex; padding: var(--s1); border-radius: var(--r-sm); color: var(--muted); } .form-dialog .dialog-close:hover { color: var(--ink); background: var(--row-hover); } .form-dialog .dialog-body { padding: var(--s4); } /* The foot sits a step down from the panel, so the two actions read as the end of the form rather than as two more fields. Sticky against a long form scrolling inside the panel: the save button is the one control a reader must never have to hunt for. */ .form-dialog .dialog-foot { position: sticky; bottom: 0; display: flex; /* SAAS-474: three buttons do not fit a 375 px dialog, and without wrapping the first one (Cancel) was pushed off the left edge. They wrap, still right-aligned. */ flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2); margin: var(--s5) calc(var(--s4) * -1) calc(var(--s4) * -1); padding: var(--s4); border-top: 1px solid var(--line); background: var(--page); } /* ----------------------------------------------------------------------------- People and groups (SAAS-79, rebuilt as panels in SAAS-115) The Owner's account screen. It was two flat tables — every Group in one, every person in the other, and a Group column to read across — until Darius ruled layout A from a rendered comparison on 2026-08-22: "there is no real grouping for separations". A Group is a panel now, and its members are a table inside it. Everything reuses the tokens and the .register rules the rest of the product has. Two shapes are genuinely new: the grant chips, and the panel. ONE COLOUR IN THE MOCK DID NOT SURVIVE MEASUREMENT. The comparison drew the Owner's card on a 4% ink wash. --muted on that wash measures 4.33:1 in light — under the floor, on the line that carries the Owner's own email — so the card sits on --surface here and the 3px ink edge alone carries the distinction. Light is this product's constrained theme (the same wash measured 7.16:1 in dark); measure there and dark follows. */ .portal-people { max-width: 100%; } .portal-people .lead { max-width: var(--measure); } /* The Owner, outside the panels because they are outside Groups. The left edge is ink rather than the brand hue: this is the one card on the screen that is not a Group, and the brand is spent on the action. */ .portal-people .owner-card { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s6); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-inline-start: 3px solid var(--ink); border-radius: var(--r-sm); background: var(--surface); } .portal-people .owner-card .mono-chip { /* --masthead-line is a chrome token, and this chip is on the page. */ border-color: var(--border-strong); background: var(--teal-wash); color: var(--nav-active-ink); } .portal-people .owner-who { display: flex; flex-direction: column; min-width: 0; } .portal-people .owner-who strong { color: var(--ink-strong); } .portal-people .owner-who .muted { font-size: var(--t-small); } .portal-people .owner-note { flex: 1 1 22rem; margin: 0; color: var(--muted); font-size: var(--t-small); } .portal-people .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin: 0 0 var(--s4); } .portal-people .section-head h2 { margin: 0; } .portal-people .page-actions { display: flex; gap: var(--s2); flex-wrap: wrap; } /* --- One Group, one panel ---------------------------------------------- */ /* The separation the ruling asked for is a gap and an edge, not a heading. --s5 between panels is wider than any gap inside one, which is what makes the boundary read without a rule drawn across the page. */ .portal-people .group-list { display: flex; flex-direction: column; gap: var(--s5); margin: 0 0 var(--s7); } .portal-people .group-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); overflow: hidden; } .portal-people .group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s4); border-bottom: 1px solid var(--line); } .portal-people .group-id { flex: 1 1 20rem; min-width: 14rem; } .portal-people .group-id h3 { margin: 0; font-size: var(--t-h3); color: var(--ink-strong); } .portal-people .group-count { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--t-small); } /* All six Surfaces, always, granted or not — a list of only the granted ones cannot answer "two of how many". Granted wears the brand wash (--nav-active-ink on --teal-wash: 6.35:1 light, 6.74:1 dark); ungranted is a dashed outline in --muted (4.97:1 on this surface). The state is in each chip's own visually-hidden text too, because a border style is not a fact anybody can hear. */ .portal-people .grant-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s3) 0 0; padding: 0; list-style: none; } .portal-people .grant-chips li { padding: 2px var(--s2); border: 1px solid transparent; border-radius: 999px; font-size: var(--t-small); white-space: nowrap; } .portal-people .grant-chips li.on { border-color: var(--teal-wash); background: var(--teal-wash); color: var(--nav-active-ink); font-weight: 600; } .portal-people .grant-chips li.off { border-style: dashed; border-color: var(--border-strong); color: var(--muted); } /* THE SIXTH CHIP, AND IT IS NOT A SURFACE (SAAS-251, ADR 0017 addendum 2026-09-06). Drawn only when the Group holds the grant, so it needs no `off` state — and set apart from the six beside it by a rule rather than by a second hue, because the brand's one colour is already spent on the chips' granted state and on the action. It is the same pill; what says "different kind of thing" is the border, which is the quietest signal that survives the dark theme unchanged. */ .portal-people .grant-chips li.people-chip { border-color: var(--border-strong); background: transparent; color: var(--ink); } /* THE EIGHTH AND NINTH CHIPS, AND THEY MEAN THE OPPOSITE OF THE SEVEN BESIDE THEM (SAAS-359, ADR 0025 addendum of 2026-09-18). ⚠ WHY THEY ARE NOT `.on`. Every chip above says "this group opens X". These two say "this group is kept from X", and a reader scanning the row as a list of capabilities would read "Own patients only" as something extra rather than something withheld. On a clinical axis that inversion is the one this card cannot afford, so the two are a different KIND of chip and look like one. SOLID INK ON A WASH OF THE PAGE, with no teal anywhere near them. Teal is the brand's one hue and ADR 0020 spends it on the primary action and on status; a grant wears it here and a limit must not, or the difference between "opens" and "is kept from" would be carried by a word alone. The wash is --page, which in both themes sits a step BACK from the card the chip is on — a recessed pill rather than a lit one — and the border is --border-strong so it still reads as a deliberate state and not as the dashed `.off`, which means "not given" rather than "taken away". NO `off` STATE, the People and Targets chips' rule: both ticks are off on every Group in the fleet the day this ships, so a chip that was off almost everywhere would be noise on every card. */ .portal-people .grant-chips li.limit { border-color: var(--border-strong); background: var(--page); color: var(--ink); font-weight: 600; } /* WHY A ROW HAS NO ACTIONS (SAAS-251 ruling 1). A person on branches this reader does not manage stays on the screen and says so — hidden, the reader cannot tell "not here" from "not mine". It sits in the actions cell, in the actions' own line height, so the table's rhythm does not break where the buttons stop. Quiet: it is a boundary working correctly, not a warning. */ .portal-people .locked-row, .portal-people .locked-note { display: block; max-width: 34ch; font-size: var(--t-small); color: var(--muted); font-style: italic; } .portal-people .locked-note { margin: 0; } .portal-people .group-actions { display: flex; align-items: flex-start; gap: var(--s2); flex-wrap: wrap; } .portal-people .group-actions form { margin: 0; } .portal-people .group-body { padding: var(--s2) var(--s4) var(--s4); } .portal-people .members-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s3) 0 var(--s2); } .portal-people .members-head h4 { margin: 0; font-size: var(--t-small); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .portal-people .empty { margin: 0; padding: var(--s4) 0; color: var(--muted); } .portal-people .row-actions { display: flex; gap: var(--s2); flex-wrap: wrap; } .portal-people .row-actions form { margin: 0; } /* --- The invitation column, and the link shown once (SAAS-181) ---------- */ /* The row's invitation sub-state. Muted, because it is not a Standing: the column to its left decides whether anybody may sign in, and this one is about a link. Painting it at full strength would make an ordinary countdown compete with a Disabled beside it. It wraps rather than holding one line, because "Invited — expires in 7 days" is a clause and this table already carries six other columns. */ .portal-people td.invitation-state { white-space: normal; color: var(--muted); } /* The minted link, drawn once and never again — moved here from operator.css in SAAS-181, because both screens that mint one draw the same panel. It wears an ink wash rather than a colour: this is the outcome of an act that went through, and --ok, --warn and --bad are reserved for the freshness ladder and for stated failures. What sets it apart from a plain saved line is the value inside it, which is the whole reason the panel exists. Unscoped, like the dialog rules above it: it belongs to whichever screen mints a link. */ .minted-link { border: 1px solid var(--border-strong); border-inline-start: 3px solid var(--ink); border-radius: var(--r-sm); background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); padding: var(--s3); margin: 0 0 var(--s5); max-width: 70ch; } .minted-link .minted-link-lead { margin: 0 0 var(--s2); } .minted-link .hint { display: block; margin: var(--s2) 0 0; } /* Whether the email went (SAAS-182), inside the panel that holds the link because both sentences are about that link. They are drawn differently on purpose: the success is a caption — the inviter need do nothing with it — while the failure hands them a job, so it carries the weight and the colour of a stated problem. --warn rather than --bad: the Invitation exists and the link beside this sentence works, so nothing here is broken. */ .minted-link .minted-link-sent { margin: var(--s2) 0 0; font-size: var(--t-small); color: var(--muted); } .minted-link .minted-link-unsent { margin: var(--s2) 0 0; font-weight: 600; color: var(--warn); } /* Full width and in the code face, because this is a value to be copied whole rather than read. `readonly` rather than disabled: a disabled input cannot be focused, and focus-then-select-all is how a link gets copied with no script and no mouse. */ .minted-link-value { width: 100%; box-sizing: border-box; padding: var(--s2); font-family: var(--mono); font-size: var(--t-small); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-strong); } /* A refused delete lands in the panel that refused it, and its sentences name people listed a few rows above — so it is spaced away from the table rather than tucked under it. */ .portal-people .group-body .signin-error { margin: var(--s4) 0 0; max-width: var(--measure); } .portal-people .group-body .signin-error p { margin: 0 0 var(--s2); } .portal-people .group-body .signin-error p:last-child { margin: 0; } /* --- Fields, shared by every dialog on this screen --------------------- */ .portal-people .field, .form-dialog .field { margin: 0 0 var(--s4); } .portal-people .field > label, .portal-people .field > .field-head > label, .form-dialog .field > label, .form-dialog .field > .field-head > label { display: block; font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: var(--s1); } .portal-people .field input, .portal-people .field select, .form-dialog .field input, .form-dialog .field select { width: 100%; box-sizing: border-box; padding: var(--s2); font: inherit; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); } /* What a field means, under it — including the two sentences that carry the ~30-minute revalidation window, which is the one thing on this screen an Owner can be wrong about without the screen looking wrong. */ .portal-people .hint, .form-dialog .hint, .portal-account .hint, .portal-accept .hint { display: block; margin: var(--s1) 0 0; color: var(--muted); font-size: var(--t-small); line-height: 1.55; } /* The grant list. Bordered because these six belong together — an Owner reads them as one answer to "what does this group open", not as six independent switches down a form. */ .portal-people .grants, .form-dialog .grants { margin: 0 0 var(--s4); padding: var(--s2) var(--s4) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); } .portal-people .grants legend, .form-dialog .grants legend { padding: 0 var(--s1); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .portal-people .grants label, .form-dialog .grants label { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; font-size: var(--t-body); } .portal-people .grants input, .form-dialog .grants input { margin: 0; width: auto; } /* The Managed Branches control (SAAS-124). Same frame as the grant list above, and deliberately: they are the portal realm's two axes, and a reader who has ticked one should recognise the other. It is the fieldset's job to say the radio and the checklist are ONE answer — "only these" means nothing without the boxes under it. */ .form-dialog .branch-pick { margin: 0 0 var(--s4); padding: var(--s2) var(--s4) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); } .form-dialog .branch-pick legend { padding: 0 var(--s1); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .form-dialog .branch-pick label.shape { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; font-size: var(--t-body); } .form-dialog .branch-pick input { margin: 0; width: auto; } /* Indented under "Only these:", because that is what the list belongs to. The indent is the whole of the relationship — no JavaScript disables these when "All branches" is chosen, since a disabled control with no script to re-enable it is a form that cannot be filled in. */ .form-dialog .branch-pick ul.branches-select { margin: 0 0 var(--s1) var(--s5); } /* The shape on a member row. Tabular numerals so "3 of 11" lines up down a column of them. */ .portal-people td.branch-shape { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); } /* Nought of eleven — the fail-closed state (SAAS-124). Nobody chose it: a release emptied the set. It is drawn as something to act on rather than as a smaller number, because an Owner scanning this panel has no other way to notice it. */ .portal-people td.branch-shape.empty { color: var(--bad); font-weight: 600; } /* WHO PUT THIS PERSON HERE, when it was not the Owner (SAAS-233, ADR 0017 addendum 2026-09-04). Beneath the name rather than beside it, so a row's first line stays the person and the second is provenance — and quiet, because the fact is informative rather than something to act on. The Owner keeps every power over such a row; the sentence is not a warning. */ .vendor-invited { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--muted); font-style: italic; } /* The Doctor Identity control (SAAS-139). The same frame as the two above it, deliberately: these are the portal realm's three axes, and a reader who has set one should recognise the next. The fieldset says the radio and the per-branch picks are ONE answer — "a doctor's account" means nothing without the branches under it. */ .form-dialog .doctor-pick { margin: 0 0 var(--s4); padding: var(--s2) var(--s4) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); } .form-dialog .doctor-pick legend { padding: 0 var(--s1); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .form-dialog .doctor-pick label.shape { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; font-size: var(--t-body); } .form-dialog .doctor-pick input[type="radio"] { margin: 0; width: auto; } /* A CHOICE THIS EDITOR MAY NOT MAKE IS DRAWN, NOT HIDDEN (SAAS-474, Darius's ruling of 2026-10-08): the doctor's account, for a person linked at a clinic the editor does not manage. Muted, with a not-allowed cursor, and the sentence that says why sits under it, in line with the radio's own words. Muted ink on the surface is the portal's quiet pairing and is not a status colour. */ .form-dialog .doctor-pick label.shape:has(input:disabled) { color: var(--muted); cursor: not-allowed; } .form-dialog .doctor-pick p.doctor-kind-refused { margin: 0 0 var(--s2) var(--s5); } /* THE KIND OF ACCOUNT, FIRST (SAAS-474, Darius's ruling in comment 11343). Three cards in a row on a wide screen, stacked on a phone. Each is a label around its radio, so the whole card is the target. The checked card takes the action colour's edge and wash — teal is chrome and action (ADR 0020) — so the reader sees which kind the questions below belong to. */ .form-dialog .kind-pick { margin: 0 0 var(--s4); padding: 0; border: 0; min-width: 0; } .form-dialog .kind-pick legend { padding: 0 0 var(--s2); font-size: var(--t-lead); font-weight: 600; color: var(--ink); } .form-dialog .kind-pick .kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } .form-dialog .kind-pick label.kind { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s2); row-gap: var(--s1); padding: var(--s3); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; } .form-dialog .kind-pick label.kind input { margin: 0; width: auto; accent-color: var(--action); } .form-dialog .kind-pick .kind-title { font-size: var(--t-body); font-weight: 600; color: var(--ink); } .form-dialog .kind-pick .kind-says { grid-column: 2; font-size: var(--t-small); line-height: 1.45; color: var(--muted); } .form-dialog .kind-pick label.kind:has(input:checked) { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); background: var(--teal-wash); } .form-dialog .kind-pick label.kind:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; } /* Name, Email, Password and Group, two to a row on a wide screen — the drawing's grid. */ .form-dialog .person-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); } /* The phone breakpoint, written in range syntax: the calendar's tests find "the" `(max-width: 767px)` block by its first appearance, and this one is earlier in the file. ⚑ A SCREEN RULE (SAAS-467). Written in range syntax, so a search for `max-width` does not find it. Unqualified, it also matched a printed A4 or Letter page, and a dialog printed while open came out as one stacked column, taller than it needs to be, where two columns fit. */ @media screen and (width <= 767px) { .form-dialog .kind-pick .kinds, .form-dialog .person-fields, /* ...and a clinic's name above its doctor picker, so the picker can show a whole name. One class more specific than the two-column rule further down, which it has to beat. */ .form-dialog .doctor-pick ul.doctor-select li { grid-template-columns: minmax(0, 1fr); } } /* ONLY THE SECTIONS THE CHECKED KIND NEEDS (SAAS-474). Each section names the kinds it is asked of in `data-asked-of`; the form's checked kind radio hides every section that does not name it. No script: a reader without one still gets a working form, and a browser without :has() shows every section — the form as it was. The handler is the truth whatever is shown. */ .form-dialog form:has([data-doctor-shape="ordinary"]:checked) [data-asked-of]:not([data-asked-of~="ordinary"]), .form-dialog form:has([data-doctor-shape="doctor"]:checked) [data-asked-of]:not([data-asked-of~="doctor"]), .form-dialog form:has([data-doctor-shape="practising"]:checked) [data-asked-of]:not([data-asked-of~="practising"]) { display: none; } /* ...and the doctor question in the words of the kind that asks it: one legend at a time. */ .form-dialog form:has([data-doctor-shape="doctor"]:checked) [data-legend-of]:not([data-legend-of="doctor"]), .form-dialog form:has([data-doctor-shape="practising"]:checked) [data-legend-of]:not([data-legend-of="practising"]), .form-dialog form:has([data-doctor-shape="ordinary"]:checked) [data-legend-of] { display: none; } /* The question a doctor's account is asked when it stops being one (SAAS-474 ruling 5): the Managed Branches frame, with its explanation under the legend. */ .form-dialog .leaving-doctor .hint { margin: 0 0 var(--s2); } /* Indented under "A doctor's account", for the branch checklist's reason: the indent is the whole of the relationship, and nothing disables these when "an ordinary account" is chosen — a disabled control with no script to re-enable it is a form that cannot be filled in. */ .form-dialog ul.doctor-select { list-style: none; margin: 0 0 var(--s1) var(--s5); padding: 0; /* Ten branches fit without scrolling, matching the branch checklist. Larger tenants scroll. */ max-height: 19rem; overflow-y: auto; } /* Name on the left, picker on the right, so a column of clinic names reads down the page and a column of doctors reads beside it. The name gets a fixed share rather than its natural width, because otherwise every row's select would start somewhere different. */ .form-dialog ul.doctor-select li { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.4fr); align-items: center; gap: var(--s3); padding: var(--s1) 0; } .form-dialog ul.doctor-select .branch { font-size: var(--t-body); } .form-dialog ul.doctor-select select { width: 100%; margin: 0; } /* A branch whose list could not be read. Muted rather than alarming: it is a condition of one clinic's host at one moment, and the link it already holds is untouched. */ .form-dialog ul.doctor-select .unreadable { font-size: var(--t-small); color: var(--muted); } /* The same name elsewhere (SAAS-144). Indented under the picker it fills, on the picker's own rule: the indent is the whole of the relationship, and this control acts on the selects above it. */ .form-dialog .also-link { margin: 0 0 var(--s2) var(--s5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); } /* What the button would add, named. Deliberately NOT styled as a notice: nothing has happened yet and nothing is wrong — it is a sentence about a button, so it reads the way the hints do. */ .form-dialog .also-link .offer { margin: 0; max-width: 60ch; font-size: var(--t-small); color: var(--muted); } /* ...and what the last press did, which IS a notice: it reports a change to the fields above. */ .form-dialog .also-link .notice { margin: 0; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: var(--s2) var(--s3); max-width: 60ch; font-size: var(--t-small); } /* The shape on a member row. Tabular numerals so "0 of 11" lines up under "Doctor · 2 branches". */ .portal-people td.doctor-shape { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); } /* A doctor's account linked nowhere (SAAS-139) — the fail-closed state on the third axis, and the twin of "0 of 11" one column over. Nobody chose it: a release took the last link away, and the account now sees nothing of its own. Drawn as something to act on, for the same reason. */ .portal-people td.doctor-shape.empty { color: var(--bad); font-weight: 600; } /* --- One control treatment, for links and buttons alike ---------------- */ /* Half of these actions are anchors — a no-script open is a GET of this page — and half are buttons on forms that write. A reader should not be able to tell which is which by looking, so the treatment is one class rather than two element selectors. ⚠ ONE ENTRY IS NAMED BY ITS CLASS RATHER THAN BY A CONTAINER, and it is the only one: `.action.danger`. See THE DESTRUCTIVE TREATMENT FOLLOWS THE CLASS below for why that one is the exception. It sits in THIS list so a destructive control's geometry is declared once, here, rather than spelled a second time down there — two copies of a control's padding is how a modifier drifts from the thing it modifies. ⚠ AND THE LAST TWO ENTRIES ARE THE PRIMARY MODIFIER ON THE TWO PORTAL PAGES THE CONTAINER LIST DID NOT REACH (SAAS-370) — they are here for `.action.danger`'s reason and nothing else: the modifier has to bring its geometry, or it lands as a teal fill with no box, no padding and no 44px floor. See THE PRIMARY TREATMENT IS SCOPED TO THE PORTAL'S PAGES below for why those two are named rather than the modifier unscoped. */ .portal-people .action, .form-dialog .action, .portal-account .action, .portal-closing-days .action.primary, .portal-branch .action.primary, .action.danger { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s1) var(--s3); font: inherit; font-size: var(--t-body); font-weight: 500; text-decoration: none; white-space: nowrap; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; } .portal-people .action:hover, .form-dialog .action:hover, .portal-account .action:hover { border-color: var(--ink); background: var(--row-hover); } /* ======================================================================= THE PRIMARY TREATMENT IS SCOPED TO THE PORTAL'S PAGES, BY NAME (SAAS-370) One filled button per dialog, and one on the page: the thing this screen is for. ⚠ WHY IT IS NOT UNSCOPED, WHICH IS THE WHOLE OF THIS TICKET. `.action.primary` was scoped exactly the way `.action.danger` was before SAAS-355 — `.portal-people` and `.form-dialog`, the same container list that was never a decision — so `Add a closing day…` on Closing days carries `class="action primary"` in the markup and drew as a PLAIN LINK. It is visible in SAAS-355's own captures. Forty-four controls in the two realms wear `action primary`. Forty of them sit inside a `FormDialog`, so `.form-dialog` already reaches them; one more is the New group trigger inside `.portal-people`. UNSCOPING WOULD THEREFORE CHANGE EXACTLY THREE MORE, and one of the three is in the VENDOR realm: `Add a closing day…` on the Operator's own Targets screen, which is the same control on the vendor's copy of the same page. A vendor-realm control changing appearance is a decision for that realm and this ticket does not carry it, so the two portal pages are named here instead. ⚑ WHAT THE EVIDENCE SAYS ABOUT THAT, WRITTEN DOWN BECAUSE IT POINTS THE OTHER WAY. SAAS-229's ruling — plain row links, separated by `.action-sep` rather than boxed — is about ANCHORS wearing bare `.action` in the Operator LIBRARY tables, and it is the argument that keeps the treatment above container-scoped. It says nothing about a page-head trigger marked `primary`, and `operator.css` already specifies exactly that role for that realm: `.operator-actions .button.primary`, "the one filled control on a list screen: the trigger that opens its entry dialog". So the vendor's `Add a closing day…` is mis-classed markup rather than a deliberately plain control, and unscoping would hand it the treatment its own realm already asks for. That is a one-line change and it is the Operator realm's to make. THE TWO PORTAL PAGES, AND WHY THEIR PLAIN `.action` SIBLINGS ARE LEFT ALONE. `.portal-branch`'s and `.portal-closing-days`'s bare `.action` controls are NOT in the treatment rule above, and that is this ticket's boundary rather than an oversight — but the two cases differ and the difference is worth knowing before somebody "finishes the job": · Closing days must NOT have it. `Rename…` is a bare `.action` in the same cell as the destructive `Delete…`, and SAAS-355's whole argument is that the BOX is the shape difference a reader who sees no red still reads. Giving `Rename…` the same box would leave hue as the only carrier and put that page back where it began. · The Branch page could. Its three controls — `Show`, `Save targets`, `Save closed days` — are `