/* HIRMS component styles — every value comes from docs/design-tokens.css. Design-system rules baked in here rather than per screen: · DataGrid collapses to cards ≤ 820px · SidePanel becomes a bottom sheet on mobile · touch targets ≥ 44px on kiosk/portal density · accent green is reserved for financial confirmations */ @import url('tokens.css'); @import url('hsl-brand.css'); /* HSL corporate identity overlay */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--f-ui); font-size: var(--t-md); line-height: var(--lh-base); color: var(--ink); background: var(--paper); /* NO GRID WASH. The 24px hairline lattice that used to sit here is gone — a v1 "instrument" device, absent from Brand Book v2.0, and at the new aurora strength it read as noise rather than texture. Client direction, 19 Aug 2026. There were TWO lattices, and both are gone: this page canvas, and .hs-welcome-rail-grid on the front door, which was hardcoded to the old warm paper and so invisible to both the --grid-line grep and the CI hex guard. Verified by measurement, not by reading: computed background-image on is `none` across all 192 captured surfaces. --grid-line survives as a token but now has NO consumer. It is kept because tenant branding may want a wash back one day; note that the handoff claimed Aurora.razor paints a sibling lattice, and it does not — Aurora renders three radial blobs and nothing else. */ -webkit-font-smoothing: antialiased; /* tnum is not cosmetic. It is what makes the money columns in the claims queue and the requisition run line up; without it the workbench looks broken at a glance. cv05 and ss03 are the Inter character variants the book specifies in §05. */ font-feature-settings: var(--ff-num); } /* dc.html consistently sets every heading to --w-bold (700), not --w-semi (600) — confirmed at dc.html:150,159,203,227,283,315,330,369,398,446,482, 503,528,543,576,685,767 etc. UI-DESIGN-SYSTEM-AUDIT §4.9. */ /* The book's scale is size PLUS line-height PLUS tracking, as a set. Taking only the sizes leaves headings smaller but still on the old 1.14 ratio with no negative tracking, which reads as generic — the opposite of the point. --lh-tight stays as the fallback for h4, which has no step of its own. */ h1, h2, h3, h4 { font-family: var(--f-disp); font-weight: var(--w-bold); line-height: var(--lh-tight); margin: 0; } h1 { font-size: var(--t-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tr-2xl); } h2 { font-size: var(--t-xl); line-height: var(--lh-xl); letter-spacing: var(--tr-xl); } h3 { font-size: var(--t-lg); line-height: var(--lh-lg); letter-spacing: var(--tr-lg); } a { color: var(--brand); text-decoration: none; } /* The offset keeps the rule clear of descenders, so an underlined link stays legible rather than having its g's and y's struck through (dc.html:84). */ a:hover { text-decoration: underline; text-underline-offset: 3px; } code, .mono { font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .02em; white-space: nowrap; } /* ── Ellipsis idiom (V1-V6 fix, docs/WORKBENCH-AUDIT-2026-08-06.md) ───────── The design system's own repeated pattern (dc.html:462-464 et al.) — put on the INNERMOST text-bearing element, never a table cell wholesale, since many cells intentionally stack two lines (a name + a mono id, for instance). Pair with a `title="@fullValue"` attribute at the call site so the full value stays reachable, not just less-clipped. Requires a bounded width from somewhere up the tree (an explicit column Width, a fixed sidebar track, a flex child with min-width:0) — this rule alone does nothing without one. */ .hs-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ── Money atom (§3.41) ──────────────────────────────────────────────────── Tabular numerals are guaranteed only here — the design-system rule for stopping KPI figures jittering as they update. Tone maps to the --pos/--neg tokens, defined and previously unused. */ .hs-money { font-variant-numeric: tabular-nums; } .hs-money.pos { color: var(--pos); } .hs-money.neg { color: var(--neg); } /* ── The accessibility floor ───────────────────────────────────────────────── Four base rules the design system states as non-negotiable (dc.html:1081-84), kept together because they are the ones that apply to everything and so belong to no component in particular. */ /* Visible focus, everywhere, once (dc.html:81). Before this, the whole codebase granted focus in two places — the form fields below and .hs-landing-card — so every nav link, button, chip, tab, sortable header and pager control gave a keyboard user no sign of where they were. In a workbench an assessor drives from the keyboard through a queue of hundreds, that is not a rough edge; it is the difference between usable and not. The universal selector is the whole point, and the design says so in as many words: focus belongs "on every focusable element, not 8 isolated rules" (dc.html:1081). A per-component focus rule is a per-component omission waiting to happen. Note the border-radius: it applies to the focused element, not just the outline, so a pill-shaped .hs-chip squares off to 3px while focused. That is the design's own rule copied faithfully; if the corner-popping reads badly on the round controls, drop the border-radius line rather than the selector. */ *:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); } /* Interactive controls that remove their own border/background need an explicit focus ring too — a chip, tab, sort header or nav link that turns invisible on focus is a keyboard user's dead end (DESIGN-HANDOFF §P2.9). The global rule above already catches most; these restate it for elements that paint their own focus target (pill corners pop to 3px, matching the design file's rule). */ .hs-chip:focus-visible, .hs-tab:focus-visible, .hs-th-sort:focus-visible, .hs-nav a:focus-visible, .hs-appbar a:focus-visible, .hs-bell-btn:focus-visible, .hs-pager button:focus-visible, .hs-btn:focus-visible, .hs-welcome-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); } /* Placeholder text. The browser default is the input's colour at reduced opacity, which lands somewhere unpredictable and usually too faint; naming the colour and forcing opacity to 1 makes it a deliberate value we can contrast-check (dc.html:82). */ ::placeholder { color: var(--ink-3); opacity: 1; } /* First tab stop on every shell: a way past the navigation. Without it a keyboard or screen-reader user tabs through the whole sidebar on every page before reaching the thing they came for. Parked off-screen with a negative offset rather than display:none, because a hidden element cannot be focused and this one has to be (dc.html:102). */ .hs-skip { position: absolute; left: -9999px; top: 8px; z-index: 99; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: var(--r-sm); font-weight: var(--w-semi); } .hs-skip:focus { left: 12px; } /* Available to assistive technology, absent from the page. For the heading a route needs but the design does not draw — the kiosk's h1, for instance, where the visible heading is the step title but a screen-reader user still has to be told what they have landed on. Not display:none and not visibility:hidden: both remove the element from the accessibility tree, which is the one thing this must not do. */ .hs-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Some people are made ill by movement — vestibular disorders, migraine — and say so at the operating system. Honour it: near-zero rather than zero, so transitionend and animationend still fire and nothing that waits on them hangs (dc.html:91). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── App shell ───────────────────────────────────────────────────────────── The design file's workbench frame (dc.html:549-624): a masthead across the top, a sidebar nav on the left, content to the right. Three grid rows — the top bar is sticky, the nav and main share the remaining row. height (not min-height) + overflow:hidden pins the shell to exactly one viewport: the mast's row is auto-sized off the top, and the nav/main row gets exactly what's left. Without a definite height there neither the mast nor the nav can stay put — the grid just keeps growing and the whole page scrolls under a "sticky" mast that has no further ancestor to stick against. Restored to the old page-scrolling behaviour below 820px, where the nav becomes a horizontal strip and a fixed-height shell would clip it. */ /* background here, not only on body: data-theme lives on THIS element, so --paper resolves to the themed value inside it. body sits outside the wrapper and would still resolve the light :root value in dark mode. */ /* No box at all. This element exists only to carry data-theme high enough that MudBlazor's portalled providers (popover, dialog, snackbar) sit INSIDE the themed subtree — custom properties inherit down the DOM, which display:contents does not interrupt, while generating no box that could disturb layout, stacking, or the fixed positioning dialogs and snackbars rely on. */ .hs-theme-root { display: contents; } /* Anything Mud renders a container for inherits MUD's text colour, not ours. .mud-drawer sets `color` from --mud-palette-drawer-text, so every descendant that does not set a colour of its own inherits it — and inside SidePanel that is the line descriptions, the amounts, .hs-kv dd and .hs-panel-head h3, while .hs-phone-section-title and .hs-kv dt are immune because they set var(--ink-2) explicitly. Measured at 1.02:1 — dark navy on a dark panel — when data-theme was moved to dark WITHOUT MudThemeProvider.IsDarkMode. In shipped code those two are two renderings of ONE C# value and always move together, so there is no live path to it today. This rule removes the possibility rather than relying on that: the panel takes its ink from the HSL token, so the two can never diverge here again regardless of what Mud's palette is doing. It is the mirror of the failure .hs-theme-root above was added for. That one was our tokens resolving light inside Mud's container; this is Mud's colour inheriting into ours. Same root — two colour systems in one subtree — and both are closed by naming the owner explicitly at the boundary. */ .hs-panel, .hs-panel-body, .hs-panel-head { color: var(--ink); } /* The lockup swaps to its reversed artwork on dark. Measured: hsl-logo.png's wordmark is rgb(0,13,58) -- 1.02:1 on the #0A1230 canvas, invisible -- while hsl-logo-reversed.png is white at 18.39:1 and exists for this. The rebrand already shipped this fix twice and both times too narrowly: the welcome rail hardcodes the reversed file in its own markup, and the masthead gets a white backing chip. Neither covers .hsl-logo, which is the shared lockup on the kiosk home, BOTH sign-in panels and /onboard -- the screens a user meets before any other. content: url() on an replaces the rendered image while leaving src, alt text and layout alone, so no call site needs to know about the theme. */ /* Repointed to the kit's own -white vector (2026-08-21). The mechanism is unchanged and still correct: content: url() swaps the rendered image while leaving src, alt and layout alone, so no call site needs to know about the theme. What changed is that both halves are now vectors from one kit, cut from the same master — the PNG pair they replace is the pair that produced eight half-a-pair defects, because two independently exported rasters can drift and these cannot. The PNGs stay on disk deliberately (product-owner: "keep fallback just in case"). Nothing references them any more, so they cost only bytes, and reverting is one string in each of two places rather than a re-export. */ [data-theme="dark"] .hsl-logo { content: url('../img/hsl-lockup-compact-white.svg'); } /* 236px, not the design file's 194px (dc.html:566-571), since 2026-09-07. The 194 was measured against six FLAT rows; the grouped rail indents a row under its header by --s3 + --s2 + 1px, and at 194px the longest labels ("Ex-gratia requests", "Dashboard & Reports") clipped to an ellipsis on the live workbench (owner screenshot). 42px is the indent back, plus the widest label's margin at 13px Inter; the row's title attribute still carries the full text for anything a tenant brand name outgrows. */ .hs-shell { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 236px 1fr; height: 100vh; overflow: hidden; background: var(--paper); color: var(--ink); } .hs-mast { grid-column: 1 / -1; } /* ── Masthead ────────────────────────────────────────────────────────────── The design file's sticky masthead (dc.html:105): glass, with the hamburger, the H+ mark + HSLOnline, a search box, then the system controls. The notification bell and theme toggle live here, at the top. Classes match AppMasthead.razor's actual markup (hs-mast-*). This block used to style hs-topbar-* — a class family nothing in the codebase renders (grep over every .razor file under src turns up zero hits) — so the masthead rendered fully unstyled, and without grid-column:1/-1 the shell's grid auto-placed the nav beside it in row 1 and shoved main content into the 248px column. */ .hs-mast { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s4); /* Three independent right-pushes, so no single failure can bunch the cluster against the brand: the spacer grows (flex:1 below), the bell carries margin-left:auto, and space-between spreads first/last as a final fallback. The live-VM "header bunched left" reports all traced to a browser holding an older stylesheet; these make the layout correct even against one. */ justify-content: space-between; padding: var(--s3) var(--s5); /* Two product-owner asks, 2026-08-09, both landing on this one property. "Make background white": the old value was the glass treatment — `color-mix(in srgb, var(--paper) 55%, transparent)` over whatever sat behind it (the aurora, the page) — which read as a dull grey scrim, not white, on the screenshot that prompted the ask. --paper at full strength IS this design's white (`--i-25` #FBFBF9 in light mode, the same token every opaque card/panel calls "paper"), so this stays a token reference rather than a hand-picked #fff, and it is opaque in BOTH themes — dark mode's --paper is a near-black opaque, not a translucent one either, and the dark-mode logo backing-chip rule two blocks down already assumed a non-white ground, so it is unaffected. backdrop-filter is dropped with it: nothing shows through an opaque bar for it to blur any more. "Add a splash of teal", pointing at the top-right corner near the language/theme/bell/account cluster: a second background-image layer UNDER the opaque colour, using the multi-layer form of the `background` shorthand (comma-separated layers paint image-over-color, and only the LAST, colour-only layer may set background-color) — so --paper stays the trailing solid layer and the bar stays opaque, while the gradient shows through only where its own stops are not fully transparent. Uses --brand — the app's one teal token (tokens.css: "le teal 600 porte les actions") — at low alpha via color-mix, so it re-derives correctly in dark mode from this one declaration instead of needing a second, hand-tuned dark value. Widened 2026-08-10: a plain `circle` sized to the corner's own farthest-corner radius faded out well before reaching the bar's own middle (the empty flex-spacer between the wordmark and the settings cluster), so that whole stretch read as plain white against a splash that only ever touched the far-right icons. A wide, short `ellipse` hugging the top edge reaches across the middle without growing tall enough to compete with the logo/wordmark on the left; alpha nudged down slightly (16%→13%) since it now covers more of the bar. */ background: radial-gradient(ellipse 820px 150px at 100% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 100%), var(--paper); border-bottom: 1px solid var(--rule); } .hs-mast-icon { display: grid; place-items: center; width: var(--ctl); height: var(--ctl); flex: none; border: none; background: transparent; color: var(--ink-2); border-radius: var(--r-sm); cursor: pointer; } .hs-mast-icon:hover { background: var(--surface-2); } /* dc.html draws the hamburger with no onClick and no collapsed/rail sidebar in any frame — it only has real work below 820px, where the sidebar becomes a drawer. Shown again in the 820px media query below. */ .hs-mast-toggle { display: none; } .hs-mast-brand { display: flex; align-items: center; gap: var(--s3); flex: none; } .hs-mast-logo-wrap { display: flex; align-items: center; flex: none; } /* 28px → 35px (product-owner ask, 2026-08-09: "increase logo size by 25%" — 28 * 1.25 = 35 exactly). This is a few px taller than every other control in the bar (.hs-mast-icon/.hs-mast-avatar are --ctl 32px / 28px), so it is now what sets the bar's own height — the bar has no explicit height of its own, only `align-items:center` + padding around its tallest child, and that child changed. It grows the measured ~54-57px bar dc.html:553-564 specs by roughly the same few px, not shrinks it — the alternative was capping the increase at 32px (level with the icon buttons) to hold the bar height exactly, but that stops short of the literal "25%" ask for a difference too small to read as a broken spec. `.hs-nav`'s sticky `top`/`max-height` below are measured against the bar's real height, not this literal number, and were re-measured and updated alongside this. */ /* 42px, not 35. The kit's floor is a WIDTH (148px for a horizontal lockup) and this asset is 710.3x200, so height drives it: 148 / (710.3/200) = 41.7px is the smallest height that clears the floor. 42px, rounded up — 35px rendered about 124px wide and was under it. */ .hs-mast-logo { display: block; height: 42px; width: auto; } /* THE CHIP IS GONE, and removing it is the other half of adopting the kit. It existed because the dark masthead carried the FULL-COLOUR lockup, which the CI manual forbids recolouring — so the manual's own fix is a white backing chip to give it a light ground. 3267dd3 repointed the dark swap to the kit's -white lockup and left this rule in place, which put white artwork on a white chip: the masthead logo rendered as a blank white rectangle in dark mode. Caught in a screenshot, not by a guard, and it is the same half-a-pair shape this rebrand has now hit nine times — I changed the artwork and left its compensating rule behind. The white lockup needs no ground; that is what being the reversed cut MEANS. */ .hs-mast-word { font-family: var(--f-disp); font-weight: var(--w-bold); font-size: var(--t-sm); letter-spacing: -.3px; } .hs-mast-spacer { flex: 1; } /* Language + Theme: an inline toolbar row down to 481px, a gear-icon dropdown below that. The gear stays hidden until the row itself would be cramped — see the ≤480px override at the bottom of this file, which is the ONLY thing that changes; .hs-mast-inline-settings holds the exact same LangToggle/ThemeToggle markup at every width. */ .hs-mast-settings { position: relative; } .hs-mast-settings-toggle { display: none; } .hs-mast-inline-settings { display: flex; align-items: center; gap: var(--s3); } .hs-mast-account { position: relative; } .hs-mast-avatar { width: 28px; height: 28px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: var(--w-semi); font-size: 10.5px; flex: none; border: 1px solid transparent; cursor: pointer; } .hs-mast-avatar:hover, .hs-mast-avatar.active { border-color: var(--brand-line); } .hs-mast-initials { pointer-events: none; } /* Same anchored-dropdown shape as .hs-bell-panel — the account menu is the masthead's other overlay and should read as the same pattern. position/right/top/z-index deleted 2026-08-16 — same dead-CSS collapse bug as .hs-bell-panel (see its history note): this lands on the list inside MudMenu's own popover now, and a second position:absolute here pulled it out of flow, collapsing the popover's outer box to 0×0. */ .hs-mast-panel { width: min(280px, calc(100vw - var(--s6))); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--e-3); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .hs-mast-who { font-size: var(--t-sm); font-weight: var(--w-semi); } .hs-mast-detail { font-size: var(--t-xs); color: var(--ink-2); margin-top: 2px; } .hs-mast-panel-section { padding-top: var(--s3); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--s2); } /* ── Sidebar nav ─────────────────────────────────────────────────────────── The design file's nav (dc.html:566-571): a 194px column, items with a 3px tick on the left, an active item filled with brand-soft + brand tick, and a badge riding the right edge. Glass, like the masthead. Two layers, not one, since 2026-08-10. `.hs-nav` is a transparent sticky/ scroll SHELL only — it owns the positioning math (sticky offset, max- height, the top gap) but paints nothing. `.hs-nav-inner` (added in MainLayout.razor, wrapping the Capture button + nav rows) is the actual visible glass panel — background, border, the row list. Splitting them is what makes the top gap read as EMPTY PAGE rather than a blank rectangle of the sidebar's own surface colour: before this split, `.hs-nav` painted its background across the whole padded box including the gap, so the "move the sidebar down" fix from the day before looked like an unstyled box floating above the real content instead of the panel hanging mid-page — direct product-owner correction on a live screenshot. */ .hs-nav { /* Reverted to --s3 (2026-08-11, product-owner, direct live-screenshot feedback during the MudBlazor migration — supersedes the --s10 bump below, kept for history). The --s10 top offset was added 2026-08-09 to align the nav's top (the Capture button) with the main column's heading row, since .hs-main's own padding + eyebrow/h1 stack sits lower than an unpadded nav would. Seen live, that gap reads as dead space floating above the nav card — nothing in the nav occupies it the way the main column's eyebrow text does — so the alignment it bought cost more than it was worth. Flush-under-the-masthead, with a small --s3 breathing gap, is the current call. Reset to 0 in the ≤820px row below either way — the nav is a horizontal strip under the mast there, not a column beside main, so there is nothing to align against. */ padding-top: var(--s3); overflow-y: auto; /* Pinned under the masthead instead of scrolling away with the page — the masthead is sticky at top:0, so the nav sticks just below it, not at 0, or the two would overlap. Bounded to the viewport height minus that offset so a nav taller than the window still scrolls internally rather than spilling under the fold. 60px, not the 54px dc.html:553-564 specs and AppMasthead's own header comment cite: raising .hs-mast-logo 28px→35px (25% bigger, product- owner ask 2026-08-09) made the logo the bar's tallest child in place of the 32px icon buttons, which grows the bar's own auto height by the same few px. Re-measured in headless Chrome after that change rather than computed by hand, since the bar's height was never an authored constant to begin with — only padding + tallest-child, same as before. Keep this in step with .hs-mast-logo's height; a future change to either without the other reintroduces the overlap this exists to prevent. */ position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); } .hs-nav-inner { background: var(--surface); border-right: 1px solid var(--rule); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 0 var(--s2) var(--s3); display: flex; flex-direction: column; gap: 2px; } .hs-brand { font-family: var(--f-disp); font-size: var(--t-lg); font-weight: var(--w-bold); color: var(--brand-lo); margin-bottom: var(--s4); padding: 0 var(--s2); } .hs-brand small { display: block; font-family: var(--f-ui); font-size: var(--t-2xs); font-weight: var(--w-reg); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; } /* ── The collapsible group header and its rows ──────────────────────────── .hs-nav-group used to be a plain uppercase
label, and stayed in this file unused for the month the rail was flat. It is a