/* ============================================================================= status-unify.css - ONE status chip, app-wide (CEO, Jul 27 2026). status.css defines the canonical glass pill (.st) and every NEW surface uses it. But older surfaces still carried their own flat, hardcoded status chips, so the same idea was drawn three or four different ways depending on the screen: .pill.success/.warning/.danger/.info Program sessions, Planner notifications .apv-badge--pending/approved/denied Approvals, My Requests .sh-badge.sh-ok/.sh-bad/.sh-wait Subsidy + status history timelines #subDetail .pp-pill Subsidy participation state This file gives all of them the SAME glass treatment and the SAME palette as .st, driven by the same `--c` custom property. Two deliberate decisions: 1) NO MARKUP WAS CHANGED. Every one of these chips keeps its existing class names and its existing C# helper (SessPill / NotifPill / StatusClass / Tone). That means no binding, no helper and no layout could break - the chips simply stop painting themselves and inherit the glass instead. 2) EACH CHIP KEEPS ITS OWN SIZE. A 10px uppercase badge in a dense timeline row and a 13px pill on a card are different densities on purpose; forcing one type size would reflow rows this pass cannot re-test. What is unified is the DESIGN - the glass, the palette, the radius, the dot - not the type scale. Loaded LAST, because mh-approvals.css / statusmenu.css / mh-subsidy.css all load after status.css and would otherwise win on source order at equal specificity. DELIBERATELY NOT TOUCHED (they are not record statuses, and making them look like one would be a lie): .pg-type the program TYPE chip (solid colour = the type's own identity) .pg-live the live-session pulse indicator (has its own animated dot) .kpi-delta a metric change (+/-), not a state #ppProfOv .pp-pill Profile overlay "Managed" / "PIN set" / "Current" - the SAME class name as the subsidy chip but a different, informational control. Scoped out on purpose; do not widen the selector. .icf.pill.country the CountryFilter / "All types" TRIGGER. It carries BOTH .icf and .pill, so the first draft of this file turned a dropdown into a status chip. Every selector here is :not(.icf) for that reason: a chip that is also a FIELD is a control, never a status. .tm-* / .chip / .fbi-chip / .wl-step / filter + segmented controls ============================================================================= */ /* ---- the palette: semantic classes mapped onto the DATABASE CONTRACT's seven hues, so a chip that has no lkp row (a document-status chip, a session pill) draws the SAME green/amber/blue as a chip that does. `danger` maps to on_hold clay because the contract defines no red - flagged in Migration_StatusPills_Contract.sql. ---- */ .mh-app .pill.success, .mh-app .apv-badge--approved, .mh-app .sh-badge.sh-ok { --c:#3E6B57; } .mh-app .pill.warning, .mh-app .apv-badge--pending, .mh-app .sh-badge.sh-wait { --c:#A67820; } .mh-app .pill.danger, .mh-app .apv-badge--denied, .mh-app .sh-badge.sh-bad { --c:#B8623A; } .mh-app .pill.info { --c:#4C5F86; } .mh-app .pill, .mh-app .apv-badge, .mh-app .apv-badge--muted, .mh-app .sh-badge, .mh-app .sh-badge.sh-muted { --c:#677579; } /* re-assert the variants: the neutral group above must not out-order them */ .mh-app .pill.success { --c:#3E6B57; } .mh-app .pill.warning { --c:#A67820; } .mh-app .pill.danger { --c:#B8623A; } .mh-app .pill.info { --c:#4C5F86; } .mh-app .apv-badge--approved { --c:#3E6B57; } .mh-app .apv-badge--pending { --c:#A67820; } .mh-app .apv-badge--denied { --c:#B8623A; } .mh-app .sh-badge.sh-ok { --c:#3E6B57; } .mh-app .sh-badge.sh-wait { --c:#A67820; } .mh-app .sh-badge.sh-bad { --c:#B8623A; } /* ---- the glass, light surfaces. Same formula as .st--glass in status.css ---- */ .mh-app .pill:not(.icf), .mh-app .apv-badge, .mh-app .sh-badge, .mh-app #subDetail .pp-pill{ background: color-mix(in srgb, var(--c) 20%, rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)))) !important; /* PERFWX18 (21 Sep 2026) - backdrop-filter REMOVED here, and only here. Owner: "a little bit of slowness when I am navigating." Measured on the Clients page: 302 elements were each blurring the page behind them, and 189 of those were badges this size. Every one is a separate compositor blur on every frame, and he runs a 34-inch ultrawide with two more screens on the same GPU, so the cost scales with the painted width. NOTHING ELSE IN THIS RULE CHANGED - same gradient, same tint, same border, same shadow, same colour. Only the blur went. It cost nothing to look at either: what sits behind a status pill is the card's own flat surface, and an 8-12px blur of a flat colour returns that same flat colour. The scrim rule further down KEEPS its blur - that is one full-screen element over real content, where it does real work. */ border: 1px solid rgba(255,255,255,.65);border-right-color:var(--tg-edge-r,rgba(255,255,255,.65));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.65)); color: color-mix(in srgb, var(--c) 80%, #15201d) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); border-radius: 999px; } /* the leading dot each of these already renders takes the status colour */ .mh-app .pill:not(.icf) .dot, .mh-app #subDetail .pp-pill .pp-dot{ background: var(--c) !important; } /* ---- the glass, dark page ---- */ body.dark .mh-app .pill:not(.icf), body.dark .mh-app .apv-badge, body.dark .mh-app .sh-badge, body.dark .mh-app #subDetail .pp-pill{ background: color-mix(in srgb, var(--c) 30%, rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)))) !important; border: 1px solid color-mix(in srgb, var(--c) 32%, rgba(255,255,255,.16)); color: color-mix(in srgb, var(--c) 46%, #ffffff) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } body.dark .mh-app .pill:not(.icf) .dot, body.dark .mh-app #subDetail .pp-pill .pp-dot{ background: color-mix(in srgb, var(--c) 70%, #fff) !important; box-shadow: 0 0 8px var(--c); } /* ---- the wizard rail keeps its own neutral chip (a relationship is not a status), and it sits on pine in both themes, so it must not take the light glass. ---- */ .mh-app :is(#clWiz,#clMbr) .pv-status .pill, body.dark .mh-app :is(#clWiz,#clMbr) .pv-status .pill{ background: rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) !important; border: 1px solid rgba(255,255,255,.18); color: #EAF2EE !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } .mh-app :is(#clWiz,#clMbr) .pv-status .pill .dot{ background: rgba(var(--tg-rgb,255,255,255),calc(.75*var(--tg-k,1))) !important; } /* ============================================================================= THE PREPARED PILL - DESIGN CONTRACT (CEO, Jul 28 2026) Source: _handoff/Database Status Pills new/Program Wizards/Status Pills.html (the SMALL version). This restyles the canonical .st AND the legacy families to the contract's exact recipe, so every status chip in the app is that pill. The mock drives each pill from TWO authored values: --ph (the hue as an "r,g,b" triplet, for rgba()) and --pi / --pid (the light / dark ink). Our pills carry ONE value - `--c`, the ColorHex the database owns - because a single source of colour is what lets a status look the same on every screen. Every rgba(var(--ph),X) in the contract is therefore written here as color-mix(in srgb, var(--c) X%, transparent), which is the same colour by definition, and the two inks are derived from the hue (75% toward black for light, 50% toward white for dark) - measured against the mock's published inks, that lands within a few units on all seven. ============================================================================= */ .mh-app .st, .mh-app .pill:not(.icf), .mh-app .apv-badge, .mh-app .sh-badge, .mh-app #subDetail .pp-pill{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))),rgba(var(--tg-rgb,255,255,255),calc(.3*var(--tg-k,1)))), color-mix(in srgb, var(--c) 13%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 22%, transparent) !important; color:color-mix(in srgb, var(--c) 75%, #000) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(40,60,80,.05), 0 8px 18px -12px color-mix(in srgb, var(--c) 70%, transparent) !important; /* PERFWX18 (21 Sep 2026) - backdrop-filter REMOVED here, and only here. Owner: "a little bit of slowness when I am navigating." Measured on the Clients page: 302 elements were each blurring the page behind them, and 189 of those were badges this size. Every one is a separate compositor blur on every frame, and he runs a 34-inch ultrawide with two more screens on the same GPU, so the cost scales with the painted width. NOTHING ELSE IN THIS RULE CHANGED - same gradient, same tint, same border, same shadow, same colour. Only the blur went. It cost nothing to look at either: what sits behind a status pill is the card's own flat surface, and an 8-12px blur of a flat colour returns that same flat colour. The scrim rule further down KEEPS its blur - that is one full-screen element over real content, where it does real work. */ border-radius:999px; } /* the dot is the hue itself, with the contract's soft halo */ .mh-app .st .st-dot, .mh-app .pill:not(.icf) .dot, .mh-app #subDetail .pp-pill .pp-dot{ background:var(--c) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent) !important; } /* ---- dark PAGE: raise the veil, lift the ink (the contract's dark block) ---- */ body.dark .mh-app .st--glass, body.dark .mh-app .pill:not(.icf), body.dark .mh-app .apv-badge, body.dark .mh-app .sh-badge, body.dark .mh-app #subDetail .pp-pill{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1))),rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1)))), color-mix(in srgb, var(--c) 24%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 42%, transparent) !important; color:color-mix(in srgb, var(--c) 50%, #fff) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -12px rgba(0,0,0,.7) !important; } body.dark .mh-app .st--glass .st-dot, body.dark .mh-app .pill:not(.icf) .dot, body.dark .mh-app #subDetail .pp-pill .pp-dot{ background:color-mix(in srgb, var(--c) 50%, #fff) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent) !important; } /* ---- STRONG - the contract's detail-header variant, verbatim from the mock's Variants section: "Filled. One per screen - the record's own status in the detail header." That is EXACTLY what .st--hero is for (the DetailShell heroes and the New Client wizard rail), so the hero pill is now the contract's .pill.strong recipe - solid hue, white ink, white dot - instead of the dark-glass approximation I had invented, which is why the list pill and the hero pill did not look like the same design system. `rgb(var(--ph))` -> `var(--c)` (the hue itself, opaque) and `rgba(var(--ph),.9)` -> color-mix(... 90%, transparent), same colour. ONE DELIBERATE DEVIATION, and the reason: the mock's dark theme sets `.pill.strong{color:#12201B}` because there the whole PAGE goes dark. Our hero sits on the pine rail, which is dark in BOTH themes - the rail never flips - so the ink stays #fff in both. Near-black ink on a mid-tone hue would drop this pill to roughly 2.5:1. ---- */ .mh-app .st--hero, .mh-app .st--glass.st--ondark, body.dark .mh-app .st--hero, body.dark .mh-app .st--glass.st--ondark{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1))),rgba(255,255,255,0)), var(--c) !important; border:1px solid color-mix(in srgb, var(--c) 90%, transparent) !important; color:#fff !important; box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 10px 22px -12px color-mix(in srgb, var(--c) 90%, transparent) !important; } .mh-app .st--hero .st-dot, .mh-app .st--glass.st--ondark .st-dot, body.dark .mh-app .st--hero .st-dot, body.dark .mh-app .st--glass.st--ondark .st-dot{ background:#fff !important; box-shadow:0 0 0 3px rgba(255,255,255,.28) !important; } /* the QR pass card is fixed-light in both themes - it keeps the light recipe */ .mh-app .st--onlight, body.dark .mh-app .st--onlight{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))),rgba(var(--tg-rgb,255,255,255),calc(.3*var(--tg-k,1)))), color-mix(in srgb, var(--c) 13%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 22%, transparent) !important; color:color-mix(in srgb, var(--c) 75%, #000) !important; } .mh-app .st--onlight .st-dot, body.dark .mh-app .st--onlight .st-dot{ background:var(--c) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent) !important; } /* ============================================================================= THE FAMILY I MISSED - `.status` + `.st-*` (CEO, Jul 28 2026) A SECOND status-chip system, invisible to the first sweep because its selectors are `.status` + `.st-active` etc. - not `.pill` / `.apv-badge` / `.sh-badge` / `.st`. `.st` and `.st-active` look alike but are unrelated: one is the canonical pill, the other is a modifier on `.status`. Defined in THREE files: mh-theme.css .st-active/.st-intake/.st-review/.st-hold/.st-arch (global) mh-admin.css .st-active/.st-inactive (Admin users) mh-feedback.css .fbi-chip.st-new/.st-review/.st-resolved/.st-dismissed (Admin feedback) In the CEO's named scope - Clients (document expiry "Days Left"), Admin (users directory, feedback inbox). The KIOSK also renders `.status`, but it is served under EmptyLayout, OUTSIDE `.mh-app`, so none of these rules reach it - it keeps its own fixed-stage design, deliberately. NOT TOUCHED here: `.fbi-cat` (a feedback CATEGORY, not a status) and every Teams chip - the CEO confirmed the Teams pills are already right. ============================================================================= */ /* ---- hue per variant, from the contract ---- */ .mh-app .status.st-active { --c:#3E6B57; } .mh-app .status.st-inactive { --c:#677579; } .mh-app .status.st-arch { --c:#7A6B83; } .mh-app .status.st-intake { --c:#A67820; } .mh-app .status.st-review { --c:#A67820; } .mh-app .status.st-hold { --c:#B8623A; } .mh-app .fbi-chip.st-new { --c:#3E6B57; } .mh-app .fbi-chip.st-review { --c:#A67820; } .mh-app .fbi-chip.st-resolved { --c:#4C5F86; } .mh-app .fbi-chip.st-dismissed { --c:#677579; } /* ---- the contract's glass, light ---- */ .mh-app .status[class*="st-"], .mh-app .fbi-chip.st-new, .mh-app .fbi-chip.st-review, .mh-app .fbi-chip.st-resolved, .mh-app .fbi-chip.st-dismissed{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))),rgba(var(--tg-rgb,255,255,255),calc(.3*var(--tg-k,1)))), color-mix(in srgb, var(--c) 13%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 22%, transparent) !important; color:color-mix(in srgb, var(--c) 75%, #000) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(40,60,80,.05), 0 8px 18px -12px color-mix(in srgb, var(--c) 70%, transparent) !important; /* PERFWX18 (21 Sep 2026) - backdrop-filter REMOVED here, and only here. Owner: "a little bit of slowness when I am navigating." Measured on the Clients page: 302 elements were each blurring the page behind them, and 189 of those were badges this size. Every one is a separate compositor blur on every frame, and he runs a 34-inch ultrawide with two more screens on the same GPU, so the cost scales with the painted width. NOTHING ELSE IN THIS RULE CHANGED - same gradient, same tint, same border, same shadow, same colour. Only the blur went. It cost nothing to look at either: what sits behind a status pill is the card's own flat surface, and an 8-12px blur of a flat colour returns that same flat colour. The scrim rule further down KEEPS its blur - that is one full-screen element over real content, where it does real work. */ border-radius:999px; } /* these chips draw their dot with `background:currentColor`, which would make it the INK. The contract's dot is the HUE itself, with the soft halo. */ .mh-app .status[class*="st-"] .dot, .mh-app .fbi-chip[class*="st-"] .dot{ background:var(--c) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent) !important; } /* ---- the contract's glass, dark page ---- */ body.dark .mh-app .status[class*="st-"], body.dark .mh-app .fbi-chip.st-new, body.dark .mh-app .fbi-chip.st-review, body.dark .mh-app .fbi-chip.st-resolved, body.dark .mh-app .fbi-chip.st-dismissed{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1))),rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1)))), color-mix(in srgb, var(--c) 24%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 42%, transparent) !important; color:color-mix(in srgb, var(--c) 50%, #fff) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -12px rgba(0,0,0,.7) !important; } body.dark .mh-app .status[class*="st-"] .dot, body.dark .mh-app .fbi-chip[class*="st-"] .dot{ background:color-mix(in srgb, var(--c) 50%, #fff) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent) !important; } /* ============================================================================= WRAPPED CHIPS - the radius, not a wrap ban (CEO, 31 Aug 2026) ----------------------------------------------------------------------------- REPORT: on the Clients KPI cards "Work Authorization expires in 4 days" drew as an oval blob once the card narrowed. MEASURED at a 500px viewport: the chip is 156 x 46 with border-radius:999px, so the browser clamps the radius to h/2 = 23px and the chip becomes a capsule around TWO lines of text. Nothing is misaligned - the text already starts at x=22 on both lines - the SHAPE is the defect. WHY NOT white-space:nowrap: the chip exists to say a document is about to expire. Truncating it to "Work Authoriz..." hides the fact it was built to shout. `.st` (the status chip) is nowrap because a status IS one word; `.pill` is the chip that carries a SENTENCE, which is why `.pill` is the one that wraps and the one fixed here. WHY 16px AND NOT A CAPSULE-OR-RECT SWITCH: CSS cannot ask "did this wrap?", but it already shrinks a radius that will not fit its box (CSS Backgrounds 3, 5.5) - so a single value does both jobs. 16px is >= half the tallest SINGLE-line pill in the app, measured, not assumed: .pill 12px/18 + 8 + 2 = 28px -> clamps to 14 (capsule) :is(#clWiz,#clMbr) .pill 12px/18 + 10 + 2 = 30px -> clamps to 15 (capsule) .pv-status .pill 13px/1 + 14 + 2 = 29px -> clamps to 14.5 (capsule) #clDetail .pill height:24px -> clamps to 12 (capsule) Every one-line pill therefore still resolves to a perfect capsule; only a WRAPPED one lands as a 16px rounded rectangle. SCOPE - `.pill` ONLY, deliberately. `.st` / `.st--hero` / `.apv-badge` / `.sh-badge` share the recipe blocks above but keep 999px: `.st` is white-space:nowrap so it can never wrap, and `.st--hero` is ~35px tall on ONE line, so a 16px radius there would turn the detail-header hero chip into a rounded rect - a regression, not a fix. ============================================================================= */ .mh-app .pill:not(.icf){ border-radius:16px; } /* ============================================================================= TICK BOXES MUST BE VISIBLE. 3 September 2026 (user report). "the tick button doesn't have a outer color and it's some how hidden and users cant recognize it" THE CAUSE. An UNCHECKED box was painted with the RECESSED FIELD tokens - the same ones the field beside it uses: background: var(--f-rest-bg) -> #DFE4EA border: 1px solid var(--f-rest-bd) -> rgba(40,60,80,.10) A #DFE4EA box on a #DFE4EA row, outlined at TEN PERCENT opacity, is invisible. It was never a contrast that "could be better" - there was essentially none. A tick box is not a recessed input. It is a CONTROL, and an empty control reads as an empty WELL: a surface-coloured square with a border you can actually see. Checked still fills with the brand colour, so on/off are now unmistakably different. ONE RULE FOR ALL FOUR SURFACES. The identical recipe was pasted into three files - detail-view.css, enroll-wizard.css and mh-household.css - which is why the defect was app-wide. status-unify.css loads after all three (36 vs 11/29/30 in App.razor), and the selector matches or beats each one, so this single block corrects them all. THE CHECKED RULES ARE LEFT ALONE. `#... .opt input:checked+.box` is more specific than this, so the brand fill still wins - only the resting state changes. ============================================================================= */ .mh-app :is(#mhDetail, #hhDetail, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #cnDelete) .opt .box, .mh-app #hhDetail .hh-form .opt .box { background: var(--mh-surface, rgb(var(--tg-rgb,255,255,255))); border: 1.5px solid rgba(40, 60, 80, .34); box-shadow: none; } /* The pointer says it is pressable before it is pressed. */ .mh-app :is(#mhDetail, #hhDetail, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #cnDelete) .opt:hover .box, .mh-app #hhDetail .hh-form .opt:hover .box { border-color: var(--mh-green, #4E7C72); } /* Dark: a white well would glare, so the surface lifts slightly instead and the border brightens to carry the same contrast the light theme gets from the border. */ body.dark .mh-app :is(#mhDetail, #hhDetail, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #cnDelete) .opt .box, body.dark .mh-app #hhDetail .hh-form .opt .box { background: rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))); border-color: rgba(180, 210, 235, .38); } /* ============================================================================= EVERY TICK BOX WEARS THE BRAND BORDER. 4 September 2026 (CEO's son, second report). "multiple times I told you to fix that issue you still didn't touched it, add Matthew House outer color on all tick buttons right now" - with a screenshot of INTERPRETER NEEDED in the New Client wizard: a pale disc on a pale row, invisible. WHY THE 3 SEP FIX MISSED IT. The block above only knew ONE family of tick box - the `.opt .box` recipe pasted into detail-view / enroll-wizard / mh-household. The app has FOUR families, and the one in the screenshot is not that one: FAMILY WHERE RESTING BORDER .opt .box 7 hosts above fixed 3 Sep (grey) input[type=checkbox] mh-theme GLOBAL, and transparent <- report (.wchk / .chkrow / .confirm) #clWiz #clMbr overrides transparent .hh-opt .tick Housing Subsidy var(--line), faint .mate .tick Case Notes follow-up rgba(30,55,48,.16) The global rule in mh-theme.css:273 paints a 20px sage-100 pill with `border: 1px solid transparent` on a sage-50 row - so ANY raw checkbox anywhere in the app was born invisible, and #clWiz / #clMbr then restate the same transparent border at id specificity, which is why a class-level fix could never reach it. ONE RULE, ONE TOKEN, ALL FOUR FAMILIES, 2px. Measured at 1.5px first: Chrome snaps border widths DOWN to whole device pixels, so 1.5px painted as 1px on a 20px disc - present, but thin. 2px is unmistakable at every zoom. The border is `--mh-ctrl-accent`, which IS the Matthew House green (#4E7C72, sage-500) in light and lifts to sage-400 in dark on its own - so there is no separate dark block to forget. The `.opt .box` family moves from its 3 Sep grey to the same brand border so all four agree. SPECIFICITY, so this actually lands: - #clWiz/#clMbr checkbox rules are (1,1,1); `.mh-app :is(#clWiz,#clMbr) ... input[type=checkbox]` is (1,2,2) and wins outright. - the global mh-theme rule is (0,2,1); `.mh-app input[type=checkbox]` here is also (0,2,1) and wins on load order (36 vs 13). - `.mate .tick` is declared at (1,3,0) / (0,4,0); restated here at (1,4,0) / (0,4,0) and later, so it wins. CHECKED STATES ARE UNTOUCHED: every family's `:checked` rule fills with the brand and sets its own border-color at higher or equal-and-later specificity, so on/off remain the filled-vs-outlined pair they were. The `.opt input` in the 7 hosts is a hidden 0x0 input behind a `.box`; giving it a border changes nothing visible, so the input rule needs no exclusion. */ /* family 1: the .opt .box well - same brand border as everyone else now */ .mh-app :is(#mhDetail, #hhDetail, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #cnDelete) .opt .box, .mh-app #hhDetail .hh-form .opt .box { border-color: var(--mh-ctrl-accent, #4E7C72); border-width: 2px; } /* family 2: every native checkbox, app-wide, INCLUDING the id-scoped wizard restatements */ .mh-app input[type=checkbox], .mh-app :is(#clWiz, #clMbr) :is(.wchk, .chkrow, .confirm) input[type=checkbox] { border: 2px solid var(--mh-ctrl-accent, #4E7C72); background-color: var(--mh-surface, rgb(var(--tg-rgb,255,255,255))); } .mh-app input[type=checkbox]:checked, .mh-app :is(#clWiz, #clMbr) :is(.wchk, .chkrow, .confirm) input[type=checkbox]:checked { border-color: var(--mh-ctrl-accent, #4E7C72); background-color: var(--mh-ctrl-accent, #4E7C72); } /* family 3: Housing Subsidy household picker */ .mh-app .hh-opt .tick { border: 2px solid var(--mh-ctrl-accent, #4E7C72); } /* family 4: Case Notes follow-up / transfer people picker */ .mh-app #mhDetail .cnx .mate .tick, .mh-app .cnx .mate .tick { border: 2px solid var(--mh-ctrl-accent, #4E7C72); } /* Dark: the token already lifts to sage-400; only the well colour needs restating so the 3 Sep dark block above does not put a grey border back on family 1. */ body.dark .mh-app :is(#mhDetail, #hhDetail, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #cnDelete) .opt .box, body.dark .mh-app #hhDetail .hh-form .opt .box { border-color: var(--mh-ctrl-accent, #8FBBA5); } body.dark .mh-app input[type=checkbox]:not(:checked), body.dark .mh-app :is(#clWiz, #clMbr) :is(.wchk, .chkrow, .confirm) input[type=checkbox]:not(:checked) { background-color: rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))); } /* ============================================================================= A WIZARD MUST OUTRANK THE RECORD IT WAS OPENED FROM. 3 September 2026. MEASURED, not guessed. Opening a program, then "New Term", appeared to do nothing: #schWiz z-index 200 .dv-stage.ovr z-index 1200 (the DetailShell record overlay) The wizard really did open - `#schWiz.show`, display:grid, opacity 1, full viewport, pointer-events auto - it was simply painted UNDERNEATH the record. elementFromPoint over the middle of the screen returned `.dv-row`, a row of the detail behind it, and not one of the wizard's four fields was hit-testable. THE TIER ALREADY EXISTED. #cnUnlock and #cnAccess were raised to 1300 during the 24 Aug case-notes sweep for exactly this reason; the other wizard shells were left at 200 and nobody hit it until a wizard was opened from inside a record. A wizard is the most modal thing on screen: if it is `.show`, nothing may cover it. Only the SHOWN state is raised, so a hidden shell keeps its old stacking and this cannot change what paints when no wizard is open. ============================================================================= */ .mh-app :is(#pgWiz, #schWiz, #enrollWiz, #cnWiz, #cnXfer).show { z-index: 1300; } /* ============================================================================= DISCARD DRAFT IS A CHIP, NOT A SHOUT. 4 September 2026 (CEO's son). "that is very bold and that color is not looking good and matching our wizard so add the Discard Draft background color on the outer color of that" THE MISMATCH. The draft banner is a soft brand-green chip and always was - `background: rgba(78,124,114,.08)` inside `border: 1px solid rgba(78,124,114,.30)`. Sitting on it was bare text at `font-weight:800` in full `--danger` #B0463C, with `background:none` and `border:0`. Two different design languages in one 34px bar: one object drawn as a calm tinted chip, one drawn as loud naked text. THE FIX IS THE BANNER'S OWN RECIPE, IN THE DANGER HUE. Same 8%-fill / 30%-outline pair, same 1px, so the two objects finally read as members of one family - the button borrows the banner's GRAMMAR rather than its colour. Weight drops 800 -> 700. THE HUE STAYS RED ON PURPOSE. Discarding a draft is destructive and irreversible, and red-warns-before-destroying is a standing app rule (see the Program wizard's remove warning). What was wrong was the VOLUME, not the colour: a tinted chip still reads as danger while sitting inside the banner instead of shouting over it. HOVER LOSES THE UNDERLINE. An underline says "text link"; this is now a chip, and it deepens fill + outline the way every other chip in the app does. ONE BLOCK, FOUR STYLESHEETS - the same defect shape as the tick boxes on this date. The identical `.wz-discard` recipe is pasted into mh-clientwizard.css (#clWiz), enroll-wizard.css (:is(#enrollWiz,#cnWiz,...)), mh-subsidy.css (bare .wz-discard) and mh-theme.css (.mh-app .ecs-body ...) - five wizards, one look, four copies. This file loads at 64, after all four (13/20/26/45), and the two selectors below out-specify every copy: (1,2,0) beats the id-scoped pair at (1,1,0), and (0,3,0) ties `.mh-app .ecs-body .wz-discard` and wins on order. All five wizards wrap the button in `.wz-draftbar`, so the second selector reaches the bare and .ecs-body copies both. ============================================================================= */ .mh-app :is(#clWiz, #clMbr, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #pgWiz, #schWiz) .wz-discard, .mh-app .wz-draftbar .wz-discard { font-weight: 700; padding: 4px 11px; border: 1px solid rgba(176, 70, 60, .30); background: rgba(176, 70, 60, .09); border-radius: 8px; } .mh-app :is(#clWiz, #clMbr, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #pgWiz, #schWiz) .wz-discard:hover, .mh-app .wz-draftbar .wz-discard:hover { background: rgba(176, 70, 60, .16); border-color: rgba(176, 70, 60, .46); text-decoration: none; } /* Dark: the banner lifts its own tint, so the chip lifts with it and keeps the same fill-to-outline ratio rather than going flat. Ink is the existing dark danger. */ body.dark .mh-app :is(#clWiz, #clMbr, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #pgWiz, #schWiz) .wz-discard, body.dark .mh-app .wz-draftbar .wz-discard { border-color: rgba(201, 123, 90, .34); background: rgba(201, 123, 90, .14); } body.dark .mh-app :is(#clWiz, #clMbr, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #pgWiz, #schWiz) .wz-discard:hover, body.dark .mh-app .wz-draftbar .wz-discard:hover { background: rgba(201, 123, 90, .22); border-color: rgba(201, 123, 90, .50); } /* ============================================================================= NON-CONTRACT ELIGIBLE - the flag, and the (!) that explains it. CEO feedback A2/A3/A4. 4 September 2026. THE COLOUR IS BRAND, AND THAT WAS HER DECISION, NOT A PREFERENCE: (37:15) us: "all the KPI card will turn to red" (37:47) Lisa: "I do it not as red" (37:53) Lisa: "let's use a brand color, because then it means they're a Matthew House, right?" That is the whole point of the chip. These families have NOT left Matthew House - private funding still covers them - so painting them in an error colour would say the opposite of what is true. The word "services" appears nowhere on the chip for the same reason: what lapsed is the CONTRACT. THE (!) IS THE ONE EXCEPTION, AND ONLY ON THE FIVE-YEAR CASE. Asked for directly: staff skim, and a family crossing five years is NEWS - something changed today that was not true yesterday, and somebody has to notice. A family marked "Not Authorized / Not Eligible" never changed, so its (!) stays brand and still. If she objects to the red on review, `.nce-bang.flash` is the only rule to delete. REDUCED MOTION IS HONOURED. A pulsing badge is exactly what vestibular-motion sensitivity reacts to, and the information is in the colour and the glyph, not the movement - so the animation drops and nothing is lost. ============================================================================= */ .mh-app .nce-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 5px 3px 11px; border-radius: 999px; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .01em; color: var(--mh-green-d, #3D655D); background: color-mix(in srgb, var(--mh-green, #4E7C72) 13%, transparent); border: 1px solid color-mix(in srgb, var(--mh-green, #4E7C72) 34%, transparent); } /* The (!) is a real button: it is the only thing on the card that opens the sheet, so it must be reachable by keyboard and must not inherit the card's click. */ .mh-app .nce-bang { display: grid; place-items: center; width: 17px; height: 17px; flex: none; padding: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; line-height: 1; color: #fff; background: var(--mh-green, #4E7C72); border: 0; transition: transform .14s ease, box-shadow .14s ease; } .mh-app .nce-bang:hover { transform: scale(1.14); } .mh-app .nce-bang:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(78,124,114,.45); } /* FIVE-YEAR ONLY. Red, and pulsing, because it just became true. */ .mh-app .nce-bang.flash { background: #C0392F; animation: nce-pulse 1.25s ease-in-out infinite; } @keyframes nce-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,47,.62); } 70% { box-shadow: 0 0 0 7px rgba(192,57,47,0); } } @media (prefers-reduced-motion: reduce) { .mh-app .nce-bang.flash { animation: none; box-shadow: 0 0 0 2px rgba(192,57,47,.4); } } /* ---- the explanation sheet ------------------------------------------------- */ .mh-app .nce-scrim { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 24px; background: rgba(18, 34, 29, .38); -webkit-backdrop-filter: blur(6px) saturate(1.3); backdrop-filter: blur(6px) saturate(1.3); } .mh-app .nce-sheet { width: min(430px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 18px; border-radius: 20px; background: var(--mh-surface, rgb(var(--tg-rgb,255,255,255))); border: 1px solid color-mix(in srgb, var(--mh-green, #4E7C72) 22%, transparent); box-shadow: 0 34px 60px -26px rgba(16, 40, 34, .55); } .mh-app .nce-hd { display: flex; align-items: center; gap: 13px; } .mh-app .nce-hd .nce-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 999px; font-size: 17px; font-weight: 900; color: #fff; background: var(--mh-green, #4E7C72); } .mh-app .nce-hd b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--mh-ink); } .mh-app .nce-hd em { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--mh-ink-dim, #5B6A64); margin-top: 2px; } .mh-app .nce-bd { display: flex; flex-direction: column; gap: 11px; } .mh-app .nce-bd p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--mh-ink); text-wrap: pretty; } /* The constraint and the reassurance are tinted differently on purpose: a reader who only takes in one of them must not take in the wrong one. */ .mh-app .nce-bd .nce-rule { padding: 10px 12px; border-radius: 11px; background: rgba(192, 57, 47, .07); border: 1px solid rgba(192, 57, 47, .22); } .mh-app .nce-bd .nce-ok { padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--mh-green, #4E7C72) 9%, transparent); border: 1px solid color-mix(in srgb, var(--mh-green, #4E7C72) 26%, transparent); } .mh-app .nce-ft { display: flex; justify-content: flex-end; } .mh-app .nce-btn { padding: 9px 20px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: #EDF7F2; background: var(--mh-green, #4E7C72); } .mh-app .nce-btn:hover { background: var(--mh-green-d, #3D655D); } body.dark .mh-app .nce-sheet { background: var(--mh-surface, #17211f); } body.dark .mh-app .nce-pill { color: var(--mh-sage-300, #9fc3b8); } /* ============================================================================= THE FAMILY BANNER, AND A REASON TO ARCHIVE. 4 September 2026. 1) .hhbanner - drilling into a household used to print a back-button and a small grey breadcrumb. The button is gone (the rail's first item is the way back now, which is where every other section of the app puts it), so what is left is not a crumb - it is the TITLE OF WHAT YOU ARE LOOKING AT, and it is sized and grounded like one. The ground is the brand at low opacity over the surface token rather than a flat colour, so it sits on the page instead of on top of it, and it reads correctly in both themes without a second rule. The name is the only thing at title weight; code, member count and country are one muted meta line beneath it, separated by dots rather than pipes because a pipe looks like a table border at 11px. 2) .arch-rsn - archiving is the one action on a client record that hides a person from everybody else's screen, so the dialog now asks WHY and will not proceed without it. It is drawn ONLY on the archive path; restoring a record is not an act anyone has to justify, so the field is not rendered at all on that side. The error state colours the BORDER and adds a line of text - it never colours the text the user is typing, which is the one thing they need to be able to read. ============================================================================= */ .mh-app .hhbanner{ display:flex; align-items:center; gap:16px; margin:0 0 18px; padding:18px 22px; border-radius:18px; background: linear-gradient(180deg, rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))), rgba(255,255,255,0)), color-mix(in srgb, var(--mh-green, #4E7C72) 11%, var(--mh-surface, #fff)); border:1px solid color-mix(in srgb, var(--mh-green, #4E7C72) 20%, transparent); box-shadow:0 1px 2px rgba(40,60,80,.05); } .mh-app .hhb-main{min-width:0} .mh-app .hhb-name{ margin:0; font-size:26px; font-weight:800; letter-spacing:-.035em; line-height:1.12; color:var(--mh-green-d, #3D655D); overflow-wrap:anywhere; } .mh-app .hhb-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:7px; font-size:12px; font-weight:700; color:var(--mh-ink-dim, #5B6A64); } .mh-app .hhb-code{font-family:var(--mh-mono, ui-monospace, Menlo, monospace); letter-spacing:.01em} .mh-app .hhb-dot{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; flex:none} .mh-app .hhb-ctry{display:inline-flex; align-items:center; gap:6px} .mh-app .hhb-ctry .idc-flag{width:17px; height:12px; border-radius:2px; object-fit:cover} body.dark .mh-app .hhbanner{ background: linear-gradient(180deg, rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))), rgba(255,255,255,0)), color-mix(in srgb, var(--mh-green, #4E7C72) 22%, var(--mh-surface, #17211f)); border-color:color-mix(in srgb, var(--mh-green, #4E7C72) 34%, transparent); } body.dark .mh-app .hhb-name{color:var(--mh-sage-300, #9fc3b8)} /* ---- the required reason ---------------------------------------------------- */ .mh-app .arch-rsn{display:flex; flex-direction:column; gap:6px; margin:2px 0 16px; text-align:left} .mh-app .arch-rsn label{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mh-ink-dim, #5B6A64); } .mh-app .arch-rsn label .req{color:#C0392F} .mh-app .arch-rsn textarea{ width:100%; resize:vertical; min-height:64px; padding:10px 12px; border-radius:12px; border:1.5px solid rgba(40,60,80,.22); background:var(--mh-surface, rgb(var(--tg-rgb,255,255,255))); font:inherit; font-size:13px; font-weight:600; color:var(--mh-ink); transition:border-color .16s ease, box-shadow .16s ease; } .mh-app .arch-rsn textarea:focus{ outline:none; border-color:var(--mh-green, #4E7C72); box-shadow:0 0 0 3px rgba(78,124,114,.16); } .mh-app .arch-rsn.bad textarea{border-color:#C0392F; box-shadow:0 0 0 3px rgba(192,57,47,.12)} .mh-app .arch-err{font-size:11.5px; font-weight:700; color:#C0392F} /* ============================================================================= PILLSIZE28 - ONE SIZE FOR EVERY STATUS PILL (owner, 28 Sep 2026: "the pills that show Cancelled / Open / Close / Auto-Closed ... all pills must be the same size across the database"). Measured before: .pill 28px tall / 12px text, .st 29px / 13px, .st--hero 14.5px, .sh-badge 10px, .apv-badge 10px, .sh-pill / .rec-pill their own - and every width followed its word (Open 67, Cancelled 93, Scheduled 95, Auto-Closed 106). Now ONE box: 28px tall, 12px / 600 text, 12px sides, and a 110px MINIMUM width with the word centred - so Open, Active, Cancelled, Scheduled, Auto-Closed, Walk-in, Client all draw the SAME pill. A longer label ("No documents on file") grows instead of being cut: a status is never truncated. Colours, glass, dots are untouched - size only. Also the record-rail state (.pd-state), the Planner event status (.pl-vstatus) and the document-expiry / admin user status (.status.st-*). Not status pills, left alone: counters (.badge, .tm-badge), case-note meta chips (.cn-pill minutes / follow-up), mail due chips (.ml-pill), filter / type chips, and the kiosk (its own 1920 stage scale). ============================================================================= */ .mh-app :is(.st, .pill:not(.icf), .apv-badge, .sh-badge, .sh-pill, .pp-pill, .rec-pill, .pd-state, .pl-vstatus, .status:is(.st-active, .st-inactive, .st-hold, .st-review)):not(#ppProfOv *){ box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; height:28px !important; min-height:28px !important; min-width:110px !important; padding:0 12px !important; gap:6px !important; font-size:12px !important; font-weight:600 !important; line-height:1 !important; letter-spacing:.01em !important; white-space:nowrap !important; } .mh-app :is(.st, .pill:not(.icf), .apv-badge, .sh-badge, .sh-pill, .pp-pill, .rec-pill, .pd-state, .pl-vstatus, .status:is(.st-active, .st-inactive, .st-hold, .st-review)):not(#ppProfOv *) :is(.st-dot, .dot, .pp-dot){ width:7px !important; height:7px !important; flex:none !important; } .mh-app .pd-state > i{ width:7px !important; height:7px !important; flex:none !important; }