/* ===================================================================================== CANVAS18 (18 Sep 2026) - THE APP BACKGROUND IS A PERSONAL THEME. Owner: "on the setting menu open a section Themes and add all those 10 theme styles there, and the default is White." The ten were chosen on the Dashboard Canvas Picker; he picked WHITE. Each person picks their own in Settings > Themes (saved per browser, key mh.canvas, like dark mode and Display Resolution); canvas.js + the pre-boot line in App.razor stamp html[data-canvas]. ONE SOURCE: the values live only here, and a Settings swatch is drawn by putting the same data-canvas on the swatch itself. SCOPE - the page background ONLY, never the small parts that share the old grey: the body, and every record / wizard canvas that painted the same #E8EBF0 (--bg-canvas on #mhDetail, #hhDetail, the enroll / case-note / program / subsidy / client wizards, the event sheet body). --mh-cream is NOT touched: it also fills hover states, segment switches and icon chips (180 uses) that must stay grey on a white page. Light mode only - dark mode keeps its deep-pine canvas exactly as before. Water glass (mh.water) is an optional moving light layer over the chosen colour. ===================================================================================== */ /* ---- the twelve. CANVAS18b (19 Sep 2026): the owner moved the default from White to SLATE CALM, so :root carries slate's values - that is what a browser with nothing stored paints, before any script runs. THEMEGLASS29 (29 Sep 2026) - EVERY GROUND IS NOW A WALLPAPER. Owner: "the theme only the background getting the effects, not the KPI cards, not the left panels ... I want glassy look same as iPhone". Glass shows what is behind it; a flat ground gives it nothing to show, which is why every card read as plain white on Blush Pink. Each theme keeps its OWN base colour (the hex on its Settings card is unchanged) and gains soft blooms in its own colour family - the way an iPhone wallpaper does the work behind Liquid Glass. Everything stays light enough that dark text sitting straight on the ground still reads. Liquid Glass keeps the clean white ground he asked for on 20 Sep. The glass tint for each theme lives in css/mh-themeglass.css. ---- */ :root,[data-canvas="slate"]{ --mh-canvas:#E1E6EB; --mh-canvas-img:radial-gradient(1100px 700px at 88% -8%, rgba(126,156,190,.34), transparent 62%), radial-gradient(900px 640px at -6% 40%, rgba(160,176,206,.26), transparent 60%), radial-gradient(1000px 700px at 62% 112%, rgba(104,150,160,.22), transparent 62%), linear-gradient(180deg, #E9EDF1 0%, #DDE3E9 100%); } [data-canvas="white"]{ --mh-canvas:#FAFBFC; --mh-canvas-img:radial-gradient(1000px 620px at 88% -10%, rgba(120,160,200,.10), transparent 62%), radial-gradient(900px 600px at -5% 100%, rgba(47,107,87,.07), transparent 60%); } [data-canvas="current"]{ --mh-canvas:#E8EBF0; --mh-canvas-img:radial-gradient(1200px 640px at 80% -10%, rgba(201,123,90,.12), transparent 60%), radial-gradient(900px 560px at -5% 0%, rgba(78,124,114,.13), transparent 58%), radial-gradient(1000px 700px at 50% 112%, rgba(128,150,190,.16), transparent 62%); } [data-canvas="sage"]{ --mh-canvas:#E4EBE7; --mh-canvas-img:radial-gradient(1100px 660px at 86% -10%, rgba(95,207,164,.22), transparent 60%), radial-gradient(900px 620px at -6% 45%, rgba(168,204,160,.20), transparent 60%), radial-gradient(1000px 640px at 45% 112%, rgba(46,74,67,.12), transparent 62%); } [data-canvas="water"]{ --mh-canvas:#E3ECF1; --mh-canvas-img:radial-gradient(1200px 720px at 72% -20%, rgba(120,180,215,.32), transparent 60%), radial-gradient(900px 620px at -4% 88%, rgba(95,190,200,.20), transparent 60%), radial-gradient(800px 560px at 100% 100%, rgba(70,130,170,.16), transparent 62%); } [data-canvas="dawn"]{ --mh-canvas:#E6EDE9; --mh-canvas-img:radial-gradient(1100px 640px at 86% -12%, rgba(242,196,160,.28), transparent 60%), radial-gradient(900px 600px at -6% 100%, rgba(70,120,100,.14), transparent 60%), linear-gradient(160deg, #EEF3EF 0%, #E3ECE7 45%, #DCE7E3 100%); } [data-canvas="stone"]{ --mh-canvas:#ECE8E3; --mh-canvas-img:radial-gradient(1100px 640px at 82% -10%, rgba(193,122,82,.20), transparent 60%), radial-gradient(900px 620px at -6% 40%, rgba(222,196,156,.30), transparent 60%), radial-gradient(1000px 640px at 55% 112%, rgba(110,140,120,.12), transparent 62%); } [data-canvas="aurora"]{ --mh-canvas:#E7ECEF; --mh-canvas-img:radial-gradient(760px 520px at 12% 8%, rgba(95,207,164,.28), transparent 62%), radial-gradient(800px 560px at 88% 16%, rgba(120,170,220,.26), transparent 62%), radial-gradient(760px 520px at 48% 50%, rgba(160,140,210,.12), transparent 64%), radial-gradient(860px 580px at 55% 108%, rgba(193,122,82,.20), transparent 62%); } /* LIQUID GLASS (19 Sep 2026). 20 Sep, his call: "it has a blue or green background - I want a clean white one." So the ground is the SAME white the White theme uses, and the glass is carried by its EDGE (the lit rim, the darkened far edge, the float shadow). Kept as he chose. */ [data-canvas="liquid"]{ --mh-canvas:#FAFBFC; --mh-canvas-img:radial-gradient(1000px 520px at 85% -10%, rgba(47,107,87,.03), transparent 60%); } [data-canvas="cloud"]{ --mh-canvas:#F1F3F5; --mh-canvas-img:radial-gradient(1100px 680px at 85% -10%, rgba(176,190,210,.34), transparent 62%), radial-gradient(900px 620px at -5% 90%, rgba(196,206,220,.40), transparent 60%); } /* his follow-up: "add a pink theme too" - rose top-right, lavender at the left, a warm peach low right, so it still sits with the pine rail and the glass cards. */ [data-canvas="blush"]{ --mh-canvas:#F6ECF0; --mh-canvas-img:radial-gradient(1100px 660px at 86% -10%, rgba(226,140,170,.32), transparent 60%), radial-gradient(900px 640px at -6% 42%, rgba(196,160,214,.20), transparent 60%), radial-gradient(1000px 640px at 70% 112%, rgba(246,176,150,.20), transparent 62%), radial-gradient(800px 520px at 0% 108%, rgba(193,122,82,.10), transparent 60%); } [data-canvas="pure"]{ --mh-canvas:#FFFFFF; --mh-canvas-img:none; } /* ---- where it paints: the page, then every record / wizard canvas that shared the grey ---- */ body:not(.dark){ background-color:var(--mh-canvas); background-image:var(--mh-canvas-img); background-attachment:fixed; } body:not(.dark) :is(#mhDetail,#hhDetail,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#clWiz,#clMbr), body:not(.dark) .wzx, body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1{ --bg-canvas:var(--mh-canvas); } body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzmain, body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .foot{ background:var(--mh-canvas); } body:not(.dark) #ecsWiz .ecs-body{ background:var(--mh-canvas); } /* ---- WATER GLASS (optional, html[data-water="1"]) - light through water over the colour ---- Two tiling light layers (fine ripple lines + soft pools) and a slow sheen, fixed behind the whole app. Moved with TRANSFORM (compositor only - no repaint per frame, safe on the front-desk laptops); stops under prefers-reduced-motion. */ html[data-water="1"] body:not(.dark)::before, html[data-water="1"] body:not(.dark)::after{ content:"";position:fixed;z-index:-1;pointer-events:none;inset:-900px;will-change:transform; } html[data-water="1"] body:not(.dark)::before{ background-image:url("data:image/svg+xml;utf8,"); background-size:520px 520px;opacity:.8;animation:mhWaterA 38s linear infinite; } html[data-water="1"] body:not(.dark)::after{ background-image:url("data:image/svg+xml;utf8,"), linear-gradient(180deg, rgba(47,107,87,0) 0%, rgba(47,107,87,.04) 55%, rgba(40,90,110,.08) 100%); background-size:900px 900px, 100% 100%;opacity:.65;animation:mhWaterB 60s linear infinite; } @keyframes mhWaterA{from{transform:translate(0,0)}to{transform:translate(520px,260px)}} @keyframes mhWaterB{from{transform:translate(0,0)}to{transform:translate(-900px,450px)}} @media (prefers-reduced-motion:reduce){ html[data-water="1"] body:not(.dark)::before, html[data-water="1"] body:not(.dark)::after{animation:none} } /* ---- Settings > Themes ---- */ #view-settings .thm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:6px 0 14px} #view-settings .thm{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:16px;padding:8px 8px 11px; background:var(--mh-surface);border:1px solid var(--mh-line);display:flex !important;flex-direction:column;gap:9px; align-items:stretch !important;justify-content:flex-start !important; /* app buttons centre their content (MudBlazor law) - a card must not */ transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} #view-settings .thm:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(30,55,48,.45)} #view-settings .thm:focus-visible{outline:none;box-shadow:var(--mh-ctrl-focus-ring)} #view-settings .thm[aria-checked="true"]{border-color:#2F6B57;box-shadow:0 0 0 3px rgba(47,107,87,.18)} #view-settings .thm-sw{display:block;width:100%;height:84px;border-radius:11px;position:relative;overflow:hidden;border:1px solid rgba(40,60,80,.08); background-color:var(--mh-canvas);background-image:var(--mh-canvas-img);background-size:cover} /* a tiny dashboard in each swatch: the green rail, the bar, two glass cards */ #view-settings .thm-sw i{position:absolute;display:block} #view-settings .thm-sw .r{left:0;top:0;bottom:0;width:14px;background:linear-gradient(180deg,#2E4A43,#213A33)} #view-settings .thm-sw .b{left:14px;right:0;top:0;height:13px;background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));border-bottom:1px solid rgba(255,255,255,.85)} #view-settings .thm-sw .c1,#view-settings .thm-sw .c2{top:24px;height:24px;border-radius:6px;background:rgba(var(--tg-rgb,255,255,255),calc(.66*var(--tg-k,1))); border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));box-shadow:0 5px 10px -7px rgba(40,52,58,.4)} #view-settings .thm-sw .c1{left:24px;width:42%} #view-settings .thm-sw .c2{right:10px;width:28%} #view-settings .thm-sw .c3{left:24px;right:10px;top:56px;height:18px;border-radius:6px;background:rgba(var(--tg-rgb,255,255,255),calc(.66*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85))} #view-settings .thm-nm{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:var(--mh-ink)} #view-settings .thm-nm .tick{margin-left:auto;width:20px;height:20px;border-radius:50%;display:none; background:no-repeat center/20px url("data:image/svg+xml;utf8,")} #view-settings .thm[aria-checked="true"] .thm-nm .tick{display:block} #view-settings .thm-nm .dft{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2F6B57;background:rgba(47,107,87,.1);border-radius:99px;padding:2px 7px} #view-settings .thm-hx{display:block;font-size:11.5px;color:var(--mh-muted);font-variant-numeric:tabular-nums;margin-top:-4px} #view-settings .thm-note{font-size:12.5px;color:var(--mh-muted);margin:2px 0 4px} body.dark #view-settings .thm{background:rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1)))} /* ---- DASH18 (18 Sep 2026) - the Dashboard sits straight on the chosen theme. Owner: "on the dashboard there is another colour on the back of the KPI cards - remove that." It was the frosted-sage FRAME (.mh-fs.theme-sage, mh-frostedsage.css): its own #EAECF1 grey gradient + two sage glows, painted as a 26px-radius panel over the page background. Light mode only: the frame goes clear; its padding stays so the cards keep their place. ---- */ /* (the frame is now removed at its source, mh-frostedsage.css - nothing to override here) */ /* ---- "turn all the Dashboard KPI cards like the topbar water style" - the same recipe as the trial topbar: clear glass (42% -> 18% white), strong blur + saturation, a bright rim, a top highlight, a float shadow and the soft diagonal reflection. The card's accent hover (lift + coloured top stripe) is kept; the reflection sits under the content (the card is its own stacking context, z-index 1). ---- */ body:not(.dark) .mh-app .mh-fs.theme-sage .kpi{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06);backdrop-filter:blur(22px) saturate(185%) brightness(1.06); border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85)); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,55,48,.06),0 14px 32px -18px rgba(30,55,48,.40); } body:not(.dark) .mh-app .mh-fs.theme-sage .kpi::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 42%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 50%,transparent 58%);opacity:.8; } body:not(.dark) .mh-app .mh-fs.theme-sage .kpi:hover, body:not(.dark) .mh-app .mh-fs.theme-sage .kpi:focus-visible{ box-shadow:0 30px 70px rgba(30,45,65,.22), inset 0 3px 0 0 var(--a), inset 0 1px 0 rgba(255,255,255,.95); } /* ---- FILTERWX18 (18 Sep 2026) - the filter sections wear the topbar's water glass. Owner: "work on the filter sections and turn the background of it like the topbar water style." .cl-side is the ONE shared left filter panel (Clients, Case Notes, Program, Housing Subsidy, Approvals) and .set-side is Settings' own; the same recipe as the trial topbar and the KPI cards: clear glass 42% -> 18% white, blur 22 + saturate 185% + brightness, bright rim, top highlight, float shadow, the soft diagonal reflection (::before, under the content). Light mode only. ---- */ body:not(.dark) .mh-app :is(.cl-side,.set-side,.hlp-toc), body:not(.dark) .mh-app .cl-glass .cl-side{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06);backdrop-filter:blur(22px) saturate(185%) brightness(1.06); border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85)); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,55,48,.06),0 14px 32px -18px rgba(30,55,48,.40); isolation:isolate; } body:not(.dark) .mh-app :is(.cl-side,.set-side,.hlp-toc)::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:linear-gradient(115deg,transparent 30%,rgba(var(--tg-rgb,255,255,255),calc(.5*var(--tg-k,1))) 42%,rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1))) 50%,transparent 58%);opacity:.8; } body:not(.dark) .mh-app :is(.set-side,.hlp-toc){position:relative} /* ---- TOOLWX18 (18 Sep 2026) - the page toolbars' controls wear the topbar water glass. Owner (screenshots of the Dashboard "+ Widgets | This Week Month All Time" and the Clients toolbar): "those filter sections that hold the filters, card view, search and ... buttons - everything must turn to water like the topbar." They all shared the inset-cool #DFE4EA fill: Dashboard .wg-seg (Widgets holder), .seg (This Week / Month / All Time) Clients .cl-switch (card / list), .cl-filterbtn, .cl-srchbar, .icf.pill.country, .cl-iobtn (...) Program .seg.pg-seg, .cl-srchbar.att-search, .icf.pill.country Same recipe as the trial global search: clear glass + a pine hairline so each still reads as a control; hover a touch denser; the SELECTED segment (.on) keeps its own solid colour. Light mode only; the topbar's own search keeps its rules. ---- */ /* + ADMIN ("don't forget the Admin section"): its toolbar reuses .cl-switch / .cl-srchbar (already covered); added its three filter dropdowns - ONLY inside a toolbar (.cl-head / .toolbar), because the same .mh-sel select also sits inside forms, which keep their field look - and the Feedback head button (.ad-approvals). */ body:not(.dark) .mh-app .main :is(.seg,.wg-seg,.cl-switch,.cl-filterbtn,.cl-iobtn,.bigbar.b14.cl-srchbar,.icf.pill.country,.ad-approvals,.mh-fs .filter-btn), body:not(.dark) .mh-app .main :is(.cl-head,.toolbar) .mh-sel select{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05),0 6px 16px -10px rgba(30,55,48,.32); } body:not(.dark) .mh-app .main :is(.cl-head,.toolbar) .mh-sel select:hover, body:not(.dark) .mh-app .main .ad-approvals:hover, body:not(.dark) .mh-app .main :is(.cl-filterbtn,.cl-iobtn,.icf.pill.country,.bigbar.b14.cl-srchbar,.mh-fs .filter-btn):hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%);border-color:rgba(47,107,87,.40); } body:not(.dark) .mh-app .main .bigbar.b14.cl-srchbar:focus-within, body:not(.dark) .mh-app .main .icf.pill.country:focus-within{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.52*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))) 100%);border-color:rgba(47,107,87,.55); box-shadow:0 0 0 3px rgba(47,107,87,.14),0 10px 24px -12px rgba(30,55,48,.32); } body:not(.dark) .mh-app .main .bigbar.b14.cl-srchbar input::placeholder{color:#6F7D89} /* ---- KPIWX18 (19 Sep 2026) - the chip INSIDE a KPI card follows its card. Owner: "our KPI cards still hold the old background for the '+/- 0' and '0 Families . 7 days' chips - those 4 KPI cards must change the background." The cards themselves went to water glass (DASH18); the delta chip was left on the flat inset-cool #DFE4EA (mh-frostedsage.css ~159), so each card carried a grey pebble on a glass surface. Same small-control recipe as the toolbars (TOOLWX18), one notch denser because it sits ON glass rather than on the canvas. Only the NEUTRAL chip - an .is-up / .is-down chip is saying something with its colour and keeps it. Light mode only; dark keeps its own fill. ---- */ body:not(.dark) .mh-app .mh-fs .kpi-delta:not(.is-up):not(.is-down){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.26*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 12px -8px rgba(30,55,48,.30); color:#4A5A66; } /* the card lifts on hover - the chip lifts with it, instead of sitting there flat */ body:not(.dark) .mh-app .mh-fs .kpi:hover .kpi-delta:not(.is-up):not(.is-down){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40); } /* ---- ROWICO18 (21 Sep 2026, second pass) - the row icons on Upcoming Reminders and Recent Activity wear the KPI CHIP'S glass. Owner: "change the background of the Reminders and Recent Activity to WHITE like you did on the KPI card - for example '0 Families . 7 days' - and make sure it has a shadow too, like the KPI cards, to read well." So this is KPIWX18's recipe verbatim (55%/26% white, blur 14, the pine hairline, the white inset rim) with a deeper drop shadow, which is what lifts a 36px chip off a white panel. The first pass tinted the glass with the row's tone; he wants white, so the tone moves to the GLYPH instead of the background - an overdue reminder still shows amber, a safeguarding one still shows red, and a row with no tone (Recent Activity) falls back to brand pine. The meaning survives; only what is behind it changed. Light mode only. ---- */ body:not(.dark) .mh-app .mh-fs .rem-ico{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.26*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 14px -8px rgba(30,55,48,.38); color:var(--t,#2F6B57); } /* the row lifts its own chip, same as a KPI card does */ body:not(.dark) .mh-app .mh-fs :is(.rem-row,.act-row):hover .rem-ico{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 9px 20px -9px rgba(30,55,48,.45); } /* ============================================================================= RAILGLASS18 (21 September 2026) - THE FROSTED RAIL, ON EVERY LEFT VIEWS PANEL. Owner, shown five designs: "I think the Frosted Rail is good but remember you have to match them with our theme - now land the same design to all left side bar panels." WHAT HE POINTED AT, AND WHAT WAS ACTUALLY WRONG. He asked whether the panel should go glass on hover. The PANEL already had - FILTERWX18, further up this file, gave .cl-side and .set-side the topbar's water glass on 18 Sep. What never changed was the ROW: every one of these panels still hovered to a flat var(--mh-cream-2) slab, a grey rectangle sitting on a glass panel. So the fix belongs on the row, and that is all this block does. THE ROW NOW READS AS A PANE OF GLASS LIFTED OFF THE PANEL: a white gradient falling from 62% to 28%, a lit rim along its top edge, and a soft drop beneath it. It is the same recipe as the top bar and the Reminders / Recent Activity marks, so nothing new is invented. The OPEN view holds that glass permanently, denser (80% -> 42%), and adds the pine bar down its left edge - so at a glance you can tell "where I am" from "where the mouse is" without reading a word. IT MATCHES EVERY THEME BECAUSE IT NAMES NO COLOUR. The tile is white ALPHA over whatever the canvas is, so Slate Calm shows slate through it, Water shows water, Aurora shows aurora, and Liquid Glass shows the liquid ground. Nothing here is keyed to one theme and nothing needs a per-theme copy. Only the accent - the pine bar and the active ink - is brand colour, exactly as it is everywhere else in the app. NO BACKDROP-FILTER ON THE ROW, AND THAT IS DELIBERATE. The design as previewed had blur(14px) on the hover. It was measured before shipping: .cl-side already carries backdrop-filter AND isolation:isolate, which makes it a BACKDROP ROOT, so a child's backdrop-filter has nothing left to sample - it blurs an already-blurred, already-smooth gradient. Two rows were rendered side by side at 2.2x zoom, one with the blur and one without, and they were the same pixels. So the blur was dropped: identical look, and not one new compositor layer on a control that repeats seven times per panel. This is the lesson from this morning's blur cull (PERFWX18, section 3z-v) applied before the mistake rather than after it - never blur a per-row element. THE PANELS THIS COVERS - the same control in three spellings, six pages: .cl-side .cl-item Clients, Case Notes, Approvals, Housing Subsidy .pg-side .pl-tab Program #view-settings .set-item Settings .hlp-toc .hlp-toc-i Help Center "In This Guide" (GUIDE01, 2 Oct 2026 - the owner: "land our New Standards interface there too"; it was kept out until then as an article's table of contents. Its number badge keeps the guide's own --a accent.) Each keeps its own hosting rules; only background, shadow and colour change. ============================================================================= */ /* ---- 1. LIGHT: the row goes to glass under the pointer ---- */ body:not(.dark) .mh-app .cl-side .cl-item, body:not(.dark) .mh-app .pg-side .pl-tab, body:not(.dark) #view-settings .set-item, body:not(.dark) .mh-app .hlp-toc .hlp-toc-i{ transition:background .18s ease-out,box-shadow .18s ease-out,color .18s ease-out; } body:not(.dark) .mh-app .cl-side .cl-item:hover, body:not(.dark) .mh-app .pg-side .pl-tab:hover, body:not(.dark) #view-settings .set-item:hover, body:not(.dark) .mh-app .hlp-toc .hlp-toc-i:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 14px -8px rgba(30,55,48,.34); color:var(--mh-green-d); } body:not(.dark) .mh-app .cl-side .cl-item:hover svg, body:not(.dark) .mh-app .pg-side .pl-tab:hover svg, body:not(.dark) #view-settings .set-item:hover svg{color:var(--mh-green-d)} /* ---- 2. LIGHT: the open view holds the glass, denser, with the pine bar ---- */ body:not(.dark) .mh-app .cl-side .cl-item.on, body:not(.dark) .mh-app .pg-side .pl-tab.on, body:not(.dark) #view-settings .set-item.on, body:not(.dark) .mh-app .hlp-toc .hlp-toc-i.on{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),.80) 0%,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 100%); box-shadow:inset 3px 0 0 var(--mh-green), inset 0 1px 0 rgba(255,255,255,.98), 0 8px 18px -10px rgba(30,55,48,.40); color:var(--mh-green-d); } body:not(.dark) .mh-app .cl-side .cl-item.on svg, body:not(.dark) .mh-app .pg-side .pl-tab.on svg, body:not(.dark) #view-settings .set-item.on svg{color:var(--mh-green-d)} /* ---- 3. DARK - the twin, written NOW rather than owed. The water glass shipped light-only on 18 Sep and the dark halves have been outstanding ever since. This one does not join that list. Same optics, inverted: the tile is white at 13% instead of 62%, the rim is a whisper, and the accent is the sage the dark theme already uses for an active row (#9FC7BD), not the pine, which disappears on a dark ground. ---- */ body.dark .mh-app .cl-side .cl-item:hover, body.dark .mh-app .pg-side .pl-tab:hover, body.dark #view-settings .set-item:hover, body.dark .mh-app .hlp-toc .hlp-toc-i:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.13*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 14px -8px rgba(0,0,0,.50); color:#FFFFFF; } body.dark .mh-app .cl-side .cl-item.on, body.dark .mh-app .pg-side .pl-tab.on, body.dark #view-settings .set-item.on, body.dark .mh-app .hlp-toc .hlp-toc-i.on{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1))) 100%); box-shadow:inset 3px 0 0 #9FC7BD, inset 0 1px 0 rgba(255,255,255,.20), 0 8px 18px -10px rgba(0,0,0,.55); color:#FFFFFF; } body.dark .mh-app .cl-side .cl-item.on svg, body.dark .mh-app .pg-side .pl-tab.on svg, body.dark #view-settings .set-item.on svg{color:#9FC7BD} /* ---- 4. COLLAPSED (64px). The label goes to font-size 0 and the row centres its mark; the tile and the bar still draw, so the open view is still findable at a glance. The bar is trimmed to 2.5px because at 64px a 3px bar is a fifth of the visible tile. ---- */ body:not(.dark) .mh-app .cl-wrap.collapsed .cl-item.on, body:not(.dark) .mh-app .cl-wrap.collapsed .pg-side .pl-tab.on{ box-shadow:inset 2.5px 0 0 var(--mh-green), inset 0 1px 0 rgba(255,255,255,.98), 0 8px 18px -10px rgba(30,55,48,.40); } body.dark .mh-app .cl-wrap.collapsed .cl-item.on, body.dark .mh-app .cl-wrap.collapsed .pg-side .pl-tab.on{ box-shadow:inset 2.5px 0 0 #9FC7BD, inset 0 1px 0 rgba(255,255,255,.20), 0 8px 18px -10px rgba(0,0,0,.55); } /* ---- 5. THE TWO ACCESSIBILITY GUARDS. Someone who has asked their operating system for less transparency gets flat, opaque rows - the point of that setting is that translucency is hard for them to read, and a 28% gradient is exactly what it is asking us not to do. Someone who has asked for less motion keeps the look and loses the fade. ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app .cl-side .cl-item:hover, body:not(.dark) .mh-app .pg-side .pl-tab:hover, body:not(.dark) #view-settings .set-item:hover{ background:var(--mh-cream-2);box-shadow:none; } body:not(.dark) .mh-app .cl-side .cl-item.on, body:not(.dark) .mh-app .pg-side .pl-tab.on, body:not(.dark) #view-settings .set-item.on{ background:rgb(var(--tg-rgb,255,255,255));box-shadow:inset 3px 0 0 var(--mh-green); } } @media (prefers-reduced-motion: reduce){ .mh-app .cl-side .cl-item, .mh-app .pg-side .pl-tab, #view-settings .set-item{transition:none} } /* ============================================================================= TEAMSWX18 (21 September 2026) - TEAMS JOINS THE REST OF THE APP. Owner: "change the TEAMS left side panel - you remember our interface designs on buttons and the rest, do it there. Also change the Teams chat area panel to our topbar style, or KPI cards if they are the same." THEY ARE THE SAME, AND THAT IS WORTH SAYING PLAINLY. The topbar (mh-weather.css TRIAL) and the Dashboard KPI card (DASH18, above) are the same glass to the byte: 42% -> 18% white, blur 22 + saturate 185% + brightness 1.06, a .85 white rim, the two inset rims, and the 105-degree diagonal reflection. The only difference is the drop shadow, because a card floats a little more than a bar does. So there was one answer to his question, not two, and this is it. WHAT TEAMS LOOKED LIKE BEFORE. It was the last page still wearing the pre-18-September furniture: both panels solid white with a cool hairline, and every control on the flat var(--mh-cream-2) / --mh-line-cool pill - the "Away" status, "+ Set a status", the search box. That flat grey is the same inset-cool fill TOOLWX18 converted everywhere else on 18 Sep; Teams simply was not on that list. The rows had their own hover (white card + a border) and their own selected state (a full green ring), neither of which matches any other panel in the app now that RAILGLASS18 has landed. WHAT IT WEARS NOW - four standards, none of them invented here: THE TWO PANELS .tm-list, .tm-chat the topbar / KPI glass, exactly as quoted above THE CONTROLS status pill, + Set a status, the status editor, search, the empty-state secondary button TOOLWX18's control glass THE ROWS .tm-row RAILGLASS18's frosted rail: 62->28% on hover, 80->42% plus the pine bar when it is the open conversation WHAT YOU READ day separators, incoming bubbles, the composer KPIWX18's chip glass THE PRIMARY BUTTONS ARE UNTOUCHED ON PURPOSE. New group, Send and the empty state's primary call to action already carry the mint gradient of the footer button standard (Sep 18). They are the standard; glass would be a downgrade. READABILITY DECIDED THE DENSITY, NOT TASTE. A chat is the most read surface in the app, so the things that carry WORDS are denser than the panels that carry them: incoming bubbles and the composer sit at 78% -> 52% white rather than the chip's 55% -> 26%. Black ink stays black ink on Aurora and Water, not only on Slate Calm. The outgoing bubble keeps its pine gradient - it is identity, like the nav rail, and it was already right. NO BLUR BELOW THE TWO PANELS, AND IT IS THE SAME REASON AS RAILGLASS18. .tm-list and .tm-chat each carry backdrop-filter AND isolation:isolate, which makes each one a BACKDROP ROOT: a descendant's own backdrop-filter has nothing left to sample. So the rows, the controls and the bubbles get the gradient, the rim and the shadow - and no blur. This matters more here than anywhere else in the app, because a bubble repeats once per MESSAGE: blurring it would have put fifty compositor layers in a long conversation for no visible gain. THE WHOLE OF TEAMS ADDS EXACTLY TWO backdrop-filters. See section 3z-v (the blur cull) for why that is the rule. ============================================================================= */ /* ---- 1. THE TWO PANELS - the topbar / KPI glass ---- */ body:not(.dark) .mh-app .tm-page :is(.tm-list,.tm-chat){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06); backdrop-filter:blur(22px) saturate(185%) brightness(1.06); border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85)); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,55,48,.06), 0 14px 32px -18px rgba(30,55,48,.40); position:relative;isolation:isolate; } /* the same soft diagonal reflection the bar and the cards carry, under the content */ body:not(.dark) .mh-app .tm-page :is(.tm-list,.tm-chat)::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 42%, rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 50%,transparent 58%);opacity:.8; } /* the panels' own inner surfaces were opaque - they have to clear, or the glass is invisible */ body:not(.dark) .mh-app .tm-page .tm-msgs{background:transparent} body:not(.dark) .mh-app .tm-page .tm-chead{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.30*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))) 100%); border-bottom-color:rgba(255,255,255,.80); } body:not(.dark) .mh-app .tm-page .tm-lhead{border-bottom-color:rgba(255,255,255,.80)} /* ---- 2. THE CONTROLS - TOOLWX18's recipe, minus the blur (see the header) ---- */ body:not(.dark) .mh-app .tm-page :is(.tm-me-status,.tm-me-statusadd,.tm-me-statusshow, .tm-me-statusedit,.tm-search,.tm-cta.g){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05), 0 6px 16px -10px rgba(30,55,48,.32); } body:not(.dark) .mh-app .tm-page :is(.tm-me-status,.tm-me-statusadd,.tm-me-statusshow, .tm-cta.g):hover, body:not(.dark) .mh-app .tm-page .tm-me-status.open{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40); } body:not(.dark) .mh-app .tm-page :is(.tm-search,.tm-me-statusedit):focus-within{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.52*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.55); box-shadow:0 0 0 3px rgba(47,107,87,.14),0 10px 24px -12px rgba(30,55,48,.32); } /* placeholder darkens on glass, exactly as the global search's did */ body:not(.dark) .mh-app .tm-page .tm-search input::placeholder{color:#6F7D89} /* ---- 3. THE ROWS - RAILGLASS18's frosted rail, so a conversation selects the way a view does. The border stays transparent at 1.5px, never coloured: the geometry must not move between resting, hovered and open, and the old full green ring is replaced by the pine bar that every other left panel in the app now uses. ---- */ body:not(.dark) .mh-app .tm-page .tm-row:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))) 100%); border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 14px -8px rgba(30,55,48,.34); } body:not(.dark) .mh-app .tm-page .tm-row.on{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),.80) 0%,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 100%); border-color:transparent; box-shadow:inset 3px 0 0 var(--mh-green),inset 0 1px 0 rgba(255,255,255,.98), 0 8px 18px -10px rgba(30,55,48,.40); } /* ---- 4. WHAT YOU READ - denser than the panels, for the reason in the header ---- */ body:not(.dark) .mh-app .tm-page .tm-daysep{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.26*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 12px -8px rgba(30,55,48,.30); } body:not(.dark) .mh-app .tm-page :is(.tm-msg.them,.tm-compose){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.78*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.52*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -10px rgba(30,55,48,.30); } body:not(.dark) .mh-app .tm-page .tm-compose:focus-within{ border-color:var(--mh-green); box-shadow:0 0 0 3px rgba(78,124,114,.12),0 6px 16px -10px rgba(30,55,48,.30); } /* ---- 5. DARK - written now, not owed. Same optics inverted; the accent is the sage the dark theme already uses for an active row, because pine disappears on a dark ground. ---- */ body.dark .mh-app .tm-page :is(.tm-list,.tm-chat){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 32px -18px rgba(0,0,0,.55); position:relative;isolation:isolate; } body.dark .mh-app .tm-page :is(.tm-msgs,.tm-chead){background:transparent} body.dark .mh-app .tm-page :is(.tm-me-status,.tm-me-statusadd,.tm-me-statusshow, .tm-me-statusedit,.tm-search,.tm-cta.g){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))) 100%); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } body.dark .mh-app .tm-page .tm-row:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.13*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))) 100%); border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 14px -8px rgba(0,0,0,.50); } body.dark .mh-app .tm-page .tm-row.on{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1))) 100%); border-color:transparent; box-shadow:inset 3px 0 0 #9FC7BD,inset 0 1px 0 rgba(255,255,255,.20), 0 8px 18px -10px rgba(0,0,0,.55); } body.dark .mh-app .tm-page :is(.tm-msg.them,.tm-compose,.tm-daysep){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))) 100%); border-color:rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } /* ---- 6. THE TRANSPARENCY GUARD. Someone who has asked their system for less transparency gets the old solid surfaces back - which on this page is the one that matters most, because it is the page made of sentences. ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app .tm-page :is(.tm-list,.tm-chat){ background:var(--mh-surface);-webkit-backdrop-filter:none;backdrop-filter:none; border-color:var(--mh-line-cool); } body:not(.dark) .mh-app .tm-page :is(.tm-list,.tm-chat)::before{display:none} body:not(.dark) .mh-app .tm-page .tm-msgs{background:var(--mh-cream)} body:not(.dark) .mh-app .tm-page .tm-chead{background:var(--mh-surface)} body:not(.dark) .mh-app .tm-page :is(.tm-me-status,.tm-me-statusadd,.tm-me-statusshow, .tm-me-statusedit,.tm-search,.tm-cta.g, .tm-msg.them,.tm-compose,.tm-daysep){ background:var(--mh-cream-2);border-color:var(--mh-line-cool);box-shadow:none; } body:not(.dark) .mh-app .tm-page .tm-row:hover{background:var(--mh-surface);box-shadow:none} body:not(.dark) .mh-app .tm-page .tm-row.on{ background:rgb(var(--tg-rgb,255,255,255));box-shadow:inset 3px 0 0 var(--mh-green); } } /* ============================================================================= PLANNERWX18 (21 September 2026) - THE PLANNER TAKES THE TOPBAR GLASS. Owner: "we completely forgot the Planner too - deploy the same topbar glass design on Planner and the filters buttons, and make it so attractive too." He is right that it was forgotten, and the reason is visible in the code: TOOLWX18 (18 Sep) listed the Dashboard's and Clients' toolbar controls by name, and Planner's were not on the list. So `.pl-today`, `.pl-nav button` and `.pl-views` were still the only survivors of the flat #DFE4EA inset-cool fill on a page where everything else had moved on. THE CALENDAR GETS A FRAME BACK, AND IT IS GLASS. KICKOFF 23 deliberately removed the calendar's paper frame and filled each day cell white instead, which was right when the page had no other surface. Now the whole app is glass, ninety white cells read as a slab. So the FRAME returns on `.pl-cal` - the topbar's own recipe - and the cells go transparent and let it through, keeping their hairlines. One glass surface, not ninety white ones. THE STICKY HEADERS ARE THE EXCEPTION, AND IT IS NOT A COMPROMISE - IT IS A BUG AVOIDED. `.pl-dow`, `.pl-dhdr` and `.pl-corner` are position:sticky, and the note in mh-theme.css says in as many words that they are opaque SO THEY MASK CONTENT SCROLLING UNDER THEM. Make those translucent and every event in the week view slides up through the day names. They take a near-solid glass instead (92% -> 84%) - it belongs to the same family, and it still masks. THE FILTERS - both meanings of the word. The toolbar's Today / < > / Month-Week-Day controls take TOOLWX18's control glass. The rail's "Staff Calendars" tick list - the actual filter - sits on a `.pl-card`, so both rail cards take the panel glass with it. ============================================================================= */ /* ---- 1. the calendar frame + the rail cards: the topbar / KPI glass ---- */ body:not(.dark) .mh-app :is(.pl-cal,.pl-card){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06); backdrop-filter:blur(22px) saturate(185%) brightness(1.06); border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85)); border-radius:var(--mh-r-card,18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,55,48,.06), 0 14px 32px -18px rgba(30,55,48,.40); position:relative;isolation:isolate;overflow:hidden; } body:not(.dark) .mh-app :is(.pl-cal,.pl-card)::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 42%, rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 50%,transparent 58%);opacity:.8; } /* ---- 2. the cells stop being ninety white tiles and let the frame show ---- */ body:not(.dark) .mh-app :is(.pl-cell,.pl-hr,.pl-slot){background:transparent} body:not(.dark) .mh-app .pl-cell:hover, body:not(.dark) .mh-app .pl-slot:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1)))} /* ---- 3. the sticky headers stay able to mask - see the header note ---- */ body:not(.dark) .mh-app :is(.pl-dow,.pl-dhdr,.pl-corner){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),.92) 0%,rgba(var(--tg-rgb,255,255,255),.84) 100%); } /* ---- 4. the toolbar controls - TOOLWX18's recipe, the list Planner was left off ---- */ body:not(.dark) .mh-app :is(.pl-today,.pl-nav button,.pl-views){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05), 0 6px 16px -10px rgba(30,55,48,.32); } body:not(.dark) .mh-app :is(.pl-today,.pl-nav button):hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px -12px rgba(30,55,48,.32); } /* the CHOSEN view keeps its solid slate, exactly as TOOLWX18 ruled for every other segment */ /* ---- 5. the agenda rows take the chip glass, so a list reads like a list of cards ---- */ body:not(.dark) .mh-app .pl-ag-item{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.26*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -10px rgba(30,55,48,.30); } body:not(.dark) .mh-app .pl-ag-item:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.36); } /* ---- 6. DARK ---- */ body.dark .mh-app :is(.pl-cal,.pl-card){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.12);border-radius:var(--mh-r-card,18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 32px -18px rgba(0,0,0,.55); position:relative;isolation:isolate;overflow:hidden; } body.dark .mh-app :is(.pl-cell,.pl-hr,.pl-slot){background:transparent} body.dark .mh-app :is(.pl-cell:hover,.pl-slot:hover){background:rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1)))} body.dark .mh-app :is(.pl-dow,.pl-dhdr,.pl-corner){background:#1E2724} body.dark .mh-app .pl-ag-item{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))) 100%); border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } /* ---- 7. the transparency guard ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app :is(.pl-cal,.pl-card){ background:var(--mh-surface);-webkit-backdrop-filter:none;backdrop-filter:none; } body:not(.dark) .mh-app :is(.pl-cal,.pl-card)::before{display:none} body:not(.dark) .mh-app :is(.pl-cell,.pl-hr,.pl-slot){background:var(--mh-surface)} body:not(.dark) .mh-app :is(.pl-dow,.pl-dhdr,.pl-corner){background:var(--mh-cream-2)} body:not(.dark) .mh-app :is(.pl-today,.pl-nav button,.pl-views,.pl-ag-item){ background:var(--mh-cream-2);-webkit-backdrop-filter:none;backdrop-filter:none; border-color:var(--mh-line-cool);box-shadow:none; } } /* ============================================================================= ICONBRAND18 (21 September 2026) - EVERY SEARCH AND FILTER GLYPH IS BRAND PINE. Owner, with a crop of the Teams send button and a crop of a search box: "change that icon colour to Matthew House branded colour, also change the search icons to Matthew House colour too, all of them to match" - and then, on the filter row: "all around the filters." THEY WERE THREE DIFFERENT GREYS, WHICH IS THE REAL DEFECT. The leading icon in a field is var(--mh-ctrl-ico) = #6E948B, a pale sage. The big search bars use a hard-coded #6B7269. The Teams search uses var(--mh-muted) = #8A8B83, a warm grey. Three neutral-ish tones doing one job, and on glass all three read as smudges. ONE TOKEN NOW, `--mh-ico-brand`, set to the pine the glass already uses for its hairlines (#2F6B57), so changing this one line moves every glyph below at once. PLACEHOLDER TEXT IS DELIBERATELY NOT TOUCHED. It shares --mh-ctrl-ico, and re-pointing that token would have turned every placeholder in the app green - louder than the words people actually typed. So the glyphs are named instead of the token being moved. ============================================================================= */ .mh-app{--mh-ico-brand:#2F6B57} body.dark .mh-app{--mh-ico-brand:#9FC7BD} /* the leading mark in a search field, wherever the field lives */ .mh-app :is(.search,.mh-srch) > svg, .mh-app .bigbar .search-ic, .mh-app .tm-page .tm-search > svg, .mh-app .tm-modal .tm-search > svg{color:var(--mh-ico-brand)} /* the filter row: the funnel, the import/export dots, the dashboard's filter button, and Planner's month arrows - "all around the filters" */ .mh-app :is(.cl-filterbtn,.cl-iobtn,.mh-fs .filter-btn,.pl-nav button) svg{color:var(--mh-ico-brand)} /* Teams' send button when there is nothing to send: it was a flat grey pebble on glass, the same defect KPIWX18 fixed on the KPI delta chip. Now the control glass, with the brand mark held back so it still reads as "not yet" rather than "press me". */ body:not(.dark) .mh-app .tm-page .tm-send:disabled{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.95); color:var(--mh-ico-brand);opacity:.55; } /* ============================================================================= BTNOLD18 (21 September 2026) - THE LAST FIVE OLD BUTTONS. Owner, on the Teams chat header: "change all the old buttons to the new one - I mean the chat star and X - and investigate where we do have the old ones, please." HE ASKED FOR AN INVESTIGATION, SO IT WAS ONE, AND IT WAS MEASURED. Two passes: 1. A RUNTIME CENSUS. Every page was loaded and walked for elements that are a button (or role=button), are visible, have NO background-image (so: not glass, not a gradient) and whose computed background-color is one of the old flat greys - #DFE4EA (223,228,234) or --mh-cream-2 (241,244,247). Pages walked: Dashboard, Clients, Case Notes, Program, Teams (with a conversation open), Planner, Services, Housing Subsidy, Settings, Administration, Help Center, and the Household record. 2. A STATIC SWEEP of all 47 stylesheets for button-shaped selectors still declaring one of those fills, to catch controls that only exist inside a dialog the census never opened. WHAT THE CENSUS FOUND, AND WHAT IT DID NOT. Eleven of the twelve pages came back EMPTY. The 18-21 September passes really did convert what they claimed to. What is left is five controls: .tm-starbtn Teams chat header - the star <- he pointed at this one .tm-iconbtn Teams chat header - profile / info <- and this .tm-iconbtn.tm-close Teams chat header - the X <- and this #hhDetail .hhbtn Household record - the 32px edit / move / archive buttons on each member card. Same family, never noticed, because you only see them once a household record is open. #clDetail .cd-copybtn Client record - the small "copy" button beside a value. .top-action-wrap.taw-ring the ring around the topbar's "+ New" pill - the last flat #DFE4EA in the top bar, which has been sitting on the open list since 18 September. TWO THINGS THE CENSUS FLAGGED THAT ARE DELIBERATELY LEFT ALONE: .zr-item.on the ACTIVE item in the main navigation rail. It is a light chip on the pine rail - that pale fill is what makes it read as selected. Not old, working. .mc-av the member photo trigger. It is an avatar, not a button surface. And every status chip the static sweep turned up (.chip.grey, .cn-chip.locked, .fbi-chip.st-dismissed, .enr-chip): those are saying something with their colour, and a grey that MEANS "inactive" is not the same grey as a button nobody restyled. WHAT THEY WEAR NOW: TOOLWX18's control glass - the same one the filter button, the search bar and the topbar's icon buttons wear. NO BLUR on any of them, for two reasons that both hold: the Teams buttons sit inside .tm-chat, which is a backdrop root, so a blur there does nothing (measured in 3z-x); and .hhbtn repeats THREE TIMES PER MEMBER ROW, which is exactly the shape of element the blur cull exists to keep clean. THE HOVERS THAT MEAN SOMETHING ARE KEPT. .hhbtn fills with brand pine on hover and .hhbtn.move fills with clay - those are the affordance telling you what the button will do, and they were already right. Only the RESTING state changes. Same for .tm-starbtn.on (the amber star) and .tm-iconbtn.on (the pine tint): a state that carries meaning keeps its colour. ============================================================================= */ body:not(.dark) .mh-app :is( .tm-page .tm-starbtn, .tm-page .tm-iconbtn, #hhDetail .hhbtn, #clDetail .cd-copybtn, .top-action-wrap.taw-ring){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05), 0 6px 16px -10px rgba(30,55,48,.32); color:var(--mh-ico-brand); } body:not(.dark) .mh-app :is( .tm-page .tm-starbtn, .tm-page .tm-iconbtn, #clDetail .cd-copybtn):hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40); color:var(--mh-green-d); } /* the two states that are saying something keep on saying it */ body:not(.dark) .mh-app .tm-page .tm-starbtn.on{color:#E0A82E} body:not(.dark) .mh-app .tm-page .tm-iconbtn.on{ background:linear-gradient(180deg,rgba(78,124,114,.20) 0%,rgba(78,124,114,.10) 100%); border-color:rgba(47,107,87,.45);color:var(--mh-green-d); } /* .hhbtn keeps its brand-fill and clay-fill hovers exactly as they were - they are the affordance, not decoration. Nothing here touches :hover for that class. */ /* the "+ New" ring holds a gradient pill, so its own rim must not compete with it */ body:not(.dark) .mh-app .top-action-wrap.taw-ring{ box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -12px rgba(30,55,48,.28); } /* ---- DARK ---- */ body.dark .mh-app :is( .tm-page .tm-starbtn, .tm-page .tm-iconbtn, #hhDetail .hhbtn, #clDetail .cd-copybtn, .top-action-wrap.taw-ring){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))) 100%); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); color:var(--mh-ico-brand); } /* ---- the transparency guard ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app :is( .tm-page .tm-starbtn, .tm-page .tm-iconbtn, #hhDetail .hhbtn, #clDetail .cd-copybtn, .top-action-wrap.taw-ring){ background:var(--mh-cream-2);border-color:var(--mh-line-cool);box-shadow:none; } } /* ============================================================================= CNFILTER18 (21 September 2026) - THE CASE NOTES FILTER ROW JOINS THE STANDARD. Owner: "the CASE NOTES filter section and ... button is not matching with other filters as we set as new standard - change it." THESE TWO FAILED IN TWO DIFFERENT WAYS, WHICH IS WHY THE ROW LOOKED ODD RATHER THAN OLD. `.cn-tl .fl` - the All / Follow-ups owed / Confidential pill holder - was NOT on the old flat #DFE4EA fill, which is why the old-button census (3z-z) did not flag it: it already had glass. But it had its OWN glass, written before there was a standard - flat `rgba(255,255,255,.75)` with a blur, a cool `rgba(30,55,48,.09)` hairline and no lit rim. Beside a real TOOLWX18 control it reads as a plain white pill, because 75% flat white is not the 34% -> 12% gradient and a dark hairline is not the pine one. A NEAR MISS is more visible than a clear miss. `.cn-tl .tb .cn-tbmore` - the "..." button - was simply never converted: solid `var(--mh-surface)`, pure white, with a `--mh-line` border. That one IS old; it escaped the census only because the Case Notes toolbar renders it just for a user who can transfer a note, so it was not on screen when the page was walked. Worth writing down: **the runtime census can only see what is rendered, so a permission-gated control can hide from it.** BOTH NOW WEAR TOOLWX18's CONTROL GLASS - the same the filter button, the search bar, the Program segment and Planner's Today button wear. The SELECTED pill keeps its solid deep pine (#1E4438) and the open "..." keeps its accent fill, exactly as TOOLWX18 ruled for every other segment: the chosen thing is not glass, or you cannot tell it was chosen. THE COUNT BADGES GO WITH THE ROW. `.fl button i` held the same grey pebble (rgba(27,44,39,.09)) that KPIWX18 removed from the KPI delta chip - a flat dot on a glass pill. They take the chip glass, minus the blur: the pill above them carries backdrop-filter and is therefore a backdrop root, so a blur on a badge inside it would cost a layer and change nothing (3z-x). NET BLUR: +1 for the whole page. The pill holder already had one, and the "..." is a single button, not a per-row control. ============================================================================= */ /* ---- the pill holder ---- */ body:not(.dark) .mh-app .cn-tl .fl{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05), 0 6px 16px -10px rgba(30,55,48,.32); } /* a resting pill is a word on glass; hover is a wash, not a second box */ body:not(.dark) .mh-app .cn-tl .fl button:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)))} /* the CHOSEN pill keeps its deep pine - see the header */ body:not(.dark) .mh-app .cn-tl .fl button.on{background:#1E4438;color:#F1F8F5} /* ---- the count badges: the KPI chip's glass, no blur (the pill is a backdrop root) ---- */ body:not(.dark) .mh-app .cn-tl .fl button i{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.30*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); color:#4A5A66; } /* inside the chosen pine pill the badge inverts, as it already did */ body:not(.dark) .mh-app .cn-tl .fl button.on i{ background:rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1)));border-color:rgba(255,255,255,.28); box-shadow:none;color:#DCEFE6; } /* ---- the "..." button ---- */ body:not(.dark) .mh-app .cn-tl .tb .cn-tbmore{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05), 0 6px 16px -10px rgba(30,55,48,.32); color:var(--mh-ico-brand); } body:not(.dark) .mh-app .cn-tl .tb .cn-tbmore:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40);color:var(--mh-green-d); } /* open keeps its solid accent - the same rule as a chosen segment */ body:not(.dark) .mh-app .cn-tl .tb .cn-tbmore.on{ background:var(--mh-ctrl-accent);-webkit-backdrop-filter:none;backdrop-filter:none; border-color:transparent;color:#fff; } /* ---- DARK ---- */ body.dark .mh-app .cn-tl .fl, body.dark .mh-app .cn-tl .tb .cn-tbmore{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))) 100%); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } body.dark .mh-app .cn-tl .tb .cn-tbmore{color:var(--mh-ico-brand)} body.dark .mh-app .cn-tl .fl button i{ background:rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1)));border:1px solid rgba(255,255,255,.14); box-shadow:none;color:#C3CECB; } /* ---- the transparency guard ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app .cn-tl .fl, body:not(.dark) .mh-app .cn-tl .tb .cn-tbmore{ background:var(--mh-cream-2);-webkit-backdrop-filter:none;backdrop-filter:none; border-color:var(--mh-line-cool);box-shadow:none; } body:not(.dark) .mh-app .cn-tl .fl button i{background:rgba(27,44,39,.09);border-color:transparent} } /* ============================================================================= CNKPI18 (21 September 2026) - THE READ-ONLY KPI STRIP TAKES THE TOPBAR GLASS. Owner, with the four Case Notes tiles - Notes you hold / Follow-ups owed / Received / Sent: "change the CASE NOTE KPI cards above like top bar water glassy ... like top bar." WHY THEY WERE MISSED, WHICH IS THE SAME STORY AS TEAMS AND PLANNER. On 18 September the Dashboard's cards took this glass, but the rule that did it was `.mh-app .mh-fs.theme-sage .kpi` - scoped to the Dashboard's frosted-sage frame. The app has a SECOND family of KPI card, `.kpi-strip .kpi`, which is the read-only strip: no hover lift, no accent stripe, `cursor:default`. It is used on Case Notes and on Program, and being outside `.mh-fs` it kept `background:var(--mh-surface)` - four plain white cards on a glass page. THIS IS THE SAME GLASS HE ASKED FOR, and it is literally the top bar's: 42% -> 18% white, blur 22 + saturate 185% + brightness 1.06, the .85 white rim, the two inset rims, the float shadow and the 105-degree diagonal reflection. `.kpi` is already `position:relative` and `overflow:hidden`, so the reflection needs only `isolation:isolate` to keep its z-index:-1 above the card's own background instead of escaping behind the page. IT LANDS ON PROGRAM'S STRIP TOO, and that is wanted, not a side effect: the same control in the same role on another tab should not look different. Program's sessions strip uses the same markup, so it comes with. THE DASHBOARD IS UNTOUCHED. Its cards are the CLICKABLE kind - they lift, they carry an accent stripe on hover, and DASH18 already dressed them. Nothing here matches `.mh-fs`. +1 blurred element per card, 4 per page. These are four big single surfaces, not a per-row control, which is the line the blur cull drew (3z-v). ============================================================================= */ body:not(.dark) .mh-app .kpi-strip .kpi{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06); backdrop-filter:blur(22px) saturate(185%) brightness(1.06); border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85)); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,55,48,.06), 0 14px 32px -18px rgba(30,55,48,.40); isolation:isolate; } body:not(.dark) .mh-app .kpi-strip .kpi::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 42%, rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 50%,transparent 58%);opacity:.8; } /* A ZERO TILE STILL HAS TO READ AS QUIETER THAN A LIVE ONE - that is what .is-zero is for, and it must survive the glass. It steps back rather than disappearing: thinner glass, softer rim. */ body:not(.dark) .mh-app .kpi-strip .kpi.is-zero{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.30*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); border-color:rgba(255,255,255,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.80),0 10px 24px -18px rgba(30,55,48,.30); } /* ---- DARK ---- */ body.dark .mh-app .kpi-strip .kpi{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 32px -18px rgba(0,0,0,.55); isolation:isolate; } body.dark .mh-app .kpi-strip .kpi.is-zero{ background:rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1)));border-color:rgba(255,255,255,.08);box-shadow:none; } /* ---- the transparency guard ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app .kpi-strip .kpi{ background:var(--mh-surface);-webkit-backdrop-filter:none;backdrop-filter:none; border-color:var(--mh-line);box-shadow:var(--mh-shadow-sm); } body:not(.dark) .mh-app .kpi-strip .kpi::before{display:none} } /* ============================================================================= SWEEPWX18 (21 September 2026) - THE SWEEP THAT SHOULD HAVE BEEN DONE FIRST. Owner, with the Attendance toolbar: "those buttons you're forgetting, I don't know why - so go ahead and double check each section, or I will keep sending you the screenshots." HE WAS RIGHT, AND THE REASON WAS MY INSTRUMENT, NOT MY ATTENTION. The census in 3z-z matched a HARD-CODED LIST of greys - #DFE4EA and --mh-cream-2. It could only ever find fills I had already thought of, and the static half of it searched for selectors containing "btn", which `.att-nav > button` does not. Two blind spots, one screenshot. THE DETECTOR WAS REBUILT TO NAME NO COLOUR AT ALL. A control is ON standard if ANY of these holds: its background-image is a gradient (glass, or a brand gradient button); its background is transparent (a text button - no surface); or its background is a SATURATED colour (pine, clay, amber, danger - a colour that is saying something). Everything else is a flat neutral slab and gets reported, whatever its hex. Then every page was walked AND every sub-tab clicked through: Program's five, Clients' five views, Case Notes' five, Planner's three, Settings' five, Services, Housing Subsidy, Administration, Teams with a chat open, Help - and the DEEP screens, which is where his three buttons actually live: they only exist after "View attendance" on a term. WHAT IT FOUND - six control families, and his was the worst of them: .att-nav > button Attendance grid: Today / < / > <- HIS SCREENSHOT. #DFE4EA. .pg-btn Program cards: Complete / Remove white .ns-act button Program Sessions: term Edit / Cancel white .ct-add Children & Schools: "Record the school" x21 white .ct-kpi Children & Schools: the readiness toggle white .pl-mini-btn Planner reminders: "Mark this reminder done" white ALL SIX NOW WEAR TOOLWX18's CONTROL GLASS. Only `.att-nav > button` gets the blur: it is three buttons on a toolbar. The other five repeat PER ROW - two per program card, two per term, one per child, one per reminder - and that is the exact shape the blur cull exists to protect (3z-v). THE BORDERS ARE DELIBERATELY NOT TOUCHED AS A GROUP, and this is the careful part. `.pg-btn.rm` and `.ns-act button.rm` carry a DANGER border and danger ink; `.ns-act button.go` and `.ct-add` carry a brand-green one. Those borders are the message - "this removes something", "this is the safe one". A blanket `border:1px solid ` would have quietly erased all four. So the group rule sets background and shadow only, and the pine hairline is applied to a NAMED list of the buttons that have nothing to say with their edge. Every meaningful hover is untouched too: .ct-add still fills brand green, .pg-btn.rm still washes danger red. WHAT THE DETECTOR FLAGGED THAT IS DELIBERATELY LEFT - four families, all CARDS OR ROWS, not controls, and each for its own reason: .pg-card.pg-clickable a whole program CARD. Cards are the .idcard family and have their own standard; converting every card in the app is a separate decision. .adu.acc-* the staff account cards in Administration - same thing. .row-open a list row, not a button. .thm the THEME SWATCH cards in Settings. These are white on purpose: each one is showing you a background colour. Glass over a swatch would fight the very thing the swatch exists to demonstrate. And `.set-sw` (rgb(227,234,232)) is a toggle SWITCH track - its colour IS its state, off versus on. Not a slab that was missed. ============================================================================= */ /* ---- 1. all six: the control glass (background + shadow only - see the header on borders) ---- */ body:not(.dark) .mh-app :is( .att-nav > button, .pg-btn, .ns-act button, .ct-add, .ct-kpi, .pl-mini-btn){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05), 0 6px 16px -10px rgba(30,55,48,.32); } /* ---- 2. the blur goes ONLY on the toolbar three ---- */ body:not(.dark) .mh-app .att-nav > button{ -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); } /* ---- 3. the pine hairline, on the buttons whose edge says nothing. .pg-btn.rm / .ns-act button.rm (danger), .ns-act button.go and .ct-add (brand) keep theirs. ---- */ body:not(.dark) .mh-app :is( .att-nav > button, .ct-kpi, .pl-mini-btn, .pg-btn.done, .ns-act button:not(.go):not(.rm)){ border-color:rgba(47,107,87,.26); } body:not(.dark) .mh-app .pg-btn:not(.rm):not(.done){border-color:rgba(47,107,87,.26)} /* ---- 4. hover: denser glass. The four buttons with a MEANING in their hover are excluded and keep exactly what they had - .ct-add fills brand green, .pg-btn.done washes pine, .pg-btn.rm and .ns-act button.rm wash danger. ---- */ body:not(.dark) .mh-app :is( .att-nav > button, .ct-kpi, .pl-mini-btn, .ns-act button:not(.go):not(.rm)):hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px -12px rgba(30,55,48,.32); } /* ---- 5. DARK ---- */ body.dark .mh-app :is( .att-nav > button, .pg-btn, .ns-act button, .ct-kpi, .pl-mini-btn){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } /* .ct-add is deliberately transparent in dark already - left as it is */ /* ---- 6. the transparency guard ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app :is( .att-nav > button, .pg-btn, .ns-act button, .ct-add, .ct-kpi, .pl-mini-btn){ background:var(--mh-surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none; } } /* ============================================================================= DATEWX18 (21 September 2026) - THE "FROM ... TO" FILTER DATES. Owner, with the From / To pair: "apply it to From To dates too, all over the database." WHY THE DETECTOR MISSED THEM, WHICH IS ITS THIRD BLIND SPOT FOUND TODAY. It scans `button, [role=button]`. MhDatePicker's field is a `
` - a control by behaviour, not by tag. The detector has been extended (see _handoff/OFFSTANDARD_DETECTOR.js) to scan a second list of control-shaped elements (.dp-field, .mh-sel select, .icf.pill, [class*=filter] input) so this shape cannot hide again. WHERE THEY ARE - a census of every MhDatePicker in the app by its context class: ad-dp 8 Administration (audit, errors) and Planner (agenda, reminders) <- FILTERS arch-dp 2 Clients > Archived <- FILTER ob-dp 2 first-login onboarding <- A FORM mh-dp 3 records and wizards <- FIELDS The ten filter pickers are converted. **The five in forms and records are deliberately NOT**, and that is his own rule, not my caution: the DEFAULT FIELD standard governs anything you type into inside a record, and TOOLWX18 drew exactly this line on 18 September for `.mh-sel select` - "ONLY inside a toolbar, because the same select also sits inside forms, which keep their field look". A date you are FILTERING BY is a toolbar control. A date you are RECORDING is a field. If he wants the record ones moved too, it is one more selector - but it would be changing the field standard, which is a bigger decision than a filter row. Both filter families were on the flat inset-cool #DFE4EA: .ad-daterange .ad-dp .dp-field (mh-admin.css ~257) .arch-filter .dp.arch-dp .dp-field (mh-theme.css ~2938) ALSO IN THE SAME ROW, and it hid from the census for the render-gated reason again: `.arch-filter-clear` - the "clear the dates" button - only appears once a date IS set, so it was never on screen when the page was walked. It is on `var(--mh-ctrl-fill)`. Converted with them. THE CALENDAR GLYPH AND THE CHEVRON GO BRAND PINE, but only on these ten. `--dp-accent` is #5E7A83, a blue-grey teal, which is why the icon reads cold beside a pine search mark. The TOKEN is left alone on purpose - it also drives the popover's selected day and its focus ring - so only `.dpf-ico` and `.dpf-chev` are re-pointed at --mh-ico-brand. Same discipline as ICONBRAND18: name the glyphs, do not move a token that other things depend on. ============================================================================= */ /* ---- the two filter families ---- */ /* SUPERSEDED FOR THE FIELDS BY RANGEKIT18 (below): every one of the ten pickers turned out to sit inside a RANGE, and a range is one field, so the glass belongs on the shell and not on each half. Only the clear button keeps this rule. */ body:not(.dark) .mh-app .arch-filter-clear{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05), 0 6px 16px -10px rgba(30,55,48,.32); } body:not(.dark) .mh-app .arch-filter-clear:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40); } /* OPEN is a state, so it gets the search box's focus treatment: denser still, a stronger pine edge and the ring - you must be able to see which of From / To you are editing. */ /* the OPEN ring moved to the shell in RANGEKIT18 (:has(.dp.open)) - one field, one focus state */ /* ---- the glyphs: brand pine, on these ten only ---- */ .mh-app :is(.ad-daterange .ad-dp, .arch-filter .dp.arch-dp) :is(.dpf-ico, .dpf-chev){ color:var(--mh-ico-brand); } /* the empty "From" / "To" placeholder darkens on glass, as the search placeholder did */ body:not(.dark) .mh-app :is(.ad-daterange .ad-dp, .arch-filter .dp.arch-dp) .dpf-val.empty{ color:#6F7D89; } /* ---- DARK ---- */ body.dark .mh-app .arch-filter-clear{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))) 100%); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } /* ---- the transparency guard ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app .arch-filter-clear{ background:var(--mh-cream-2);-webkit-backdrop-filter:none;backdrop-filter:none; border-color:var(--mh-line-cool);box-shadow:none; } } /* ============================================================================= PLMONTH18 (21 September 2026) - "September 2026" GETS A SURFACE. Owner: "add a background on the September 2026 too, the glass like others." It is `.pl-month`, and it is genuinely a CONTROL - mh-theme.css line 955 gives it `cursor:pointer; user-select:none`, because clicking it opens the month jump. But it was drawn as bare text: no padding, no radius, no surface. With the two arrows either side now on glass (PLANNERWX18), a naked label between two glass buttons reads as a gap in the row. It did NOT show up in the detector, and for a fourth reason worth adding to the list: it has no background AT ALL, so it passes the "transparent = a text button, it has no surface" test. That test is right for a text button; it is wrong for a clickable label sitting inside a control cluster. **The lesson is the one he keeps proving: the detector narrows the hunt, it does not end it - a thing can be off-standard by having no surface where one belongs.** Sized to its neighbours on purpose: 32px tall and radius 9, which is exactly `.pl-nav button`, so the three read as one segmented group rather than three objects. ============================================================================= */ /* PLANSHEET01 (1 Oct 2026) - owner: "check the Date October 2026 it Got very big ... turn it like Today size". It was 20px/600 in the heading face (mh-theme.css .pl-month); it now carries Today's own type, 13px/700 body face, so the toolbar reads as one row of controls. The min-width keeps the arrows still while the label changes length (May 2026 / September 2026). */ .mh-app .pl-nav .pl-month{ font-family:var(--mh-font-body);font-size:13px;font-weight:700;letter-spacing:normal;min-width:128px; height:32px;padding:0 14px;border-radius:9px; display:inline-flex;align-items:center;justify-content:center; transition:background .15s,border-color .15s,box-shadow .15s; } body:not(.dark) .mh-app .pl-nav .pl-month{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05), 0 6px 16px -10px rgba(30,55,48,.32); } body:not(.dark) .mh-app .pl-nav .pl-month:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40); } body.dark .mh-app .pl-nav .pl-month{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))) 100%); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app .pl-nav .pl-month{ background:var(--mh-cream-2);-webkit-backdrop-filter:none;backdrop-filter:none; border-color:var(--mh-line-cool);box-shadow:none; } } /* ============================================================================= RANGEKIT18 (21 September 2026) - THE OWNER'S OWN "REPORTING PERIOD" FIELD. Owner: "what you have did is wrong on the Date range. Go to _handoff/System Screens/ inset-cool-field-kit, open index.html and styles.css, navigate to the Date Range & Currency section, pick the Reporting period, and when you deploy that change the interface same as others." HE WAS RIGHT AND MY JOINDATE18 IS DELETED. I invented a joined pill - two date pills welded together with the word "to" as the weld. His kit already answers this, and has since June: a date range is ONE field, not two fields touching. From index.html line 401:
calendar ->
ONE shell. ONE calendar mark, at the far left. A 1px divider after it. Then the two dates, CENTRED, with an ARROW between them - not the word "to", and no chevrons at all. That is a different idea from what I built, and a better one: the arrow says "through", and one calendar mark says "this whole thing is a date". THIS IS THE SECOND TIME. On 19 September I redrew his icon pack instead of deploying it, and the lesson written down then was: WHEN A PACK ARRIVES, DEPLOY IT, DON'T REDRAW IT. I should have opened this folder before touching a date control. Writing it here so the next session checks _handoff/System Screens FIRST. WHAT IS TAKEN FROM THE KIT, EXACTLY: the structure above; `.ic` at 19px; the divider at 1px x 24px, rgba(40,60,80,.16); the gap of 11px; the arrow at 16px in --ink-4 (#9AA7B3); the centred dates; radius --r-md (13px). WHAT IS NOT TAKEN, AND THIS IS WHAT "SAME AS OTHERS" MEANS. The kit's field is a FORM field: 48px tall, 15px type, on the flat inset-cool #DFE4EA. These five live in a FILTER ROW beside "All types" and the search bar, which are 40px and on the water glass. Taking the kit's 48px and its flat grey would have made the one control in the row that is taller than the rest and the only one not on glass - which is the complaint he opened with, in a new outfit. So: the kit's STRUCTURE AND PROPORTIONS at the row's 40px scale, wearing the row's surface. ALL FIVE RANGES ARE NOW ONE RULE. Clients > Archived was wrapped in `.ad-daterange` in the Razor - the same wrapper Administration and Planner already had - because styling `.arch-filter-row` itself would have swallowed the Clear button and the range warning into the field's shell the moment somebody picked a date. ============================================================================= */ /* ---- 1. the shell: the kit's .icf, at the filter row's scale ---- */ .mh-app .ad-daterange{ display:flex;align-items:center;gap:11px; height:40px;padding:0 15px;border-radius:13px; /* the kit's --r-md */ box-sizing:border-box; /* WIDTH. In the kit this field sits in a 2-column grid and is ~480px, so it never had to declare one. Here it is a flex item in a filter row, so with the two pickers' own fixed widths overridden to flex:1 it collapsed to its content and the dates had nowhere to go. 306px is the measured content width - 19 icon + 30 padding + 44 gaps + 16 arrow + two ~90px dates - plus a little air, so "01 Jan 2026 -> 31 Mar 2026" never crowds the arrow. */ min-width:340px;flex:none; /* THE POPOVER WAS BEING PAINTED UNDER THE PAGE. `backdrop-filter` on this shell makes it a STACKING CONTEXT, and a stacking context with `z-index:auto` cannot let a descendant rise above its own siblings - so `.dp-pop`'s z-index:40 was trapped inside the filter row and the agenda card and the search bar drew over the open calendar. The shell is positioned and lifted, and lifted further while a half is open, so the calendar clears everything around it. This is the cost of glass on a container that holds a popover, and it is worth knowing before the next surface gets one. */ position:relative;z-index:5; } body:not(.dark) .mh-app .ad-daterange{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05), 0 6px 16px -10px rgba(30,55,48,.32); } body:not(.dark) .mh-app .ad-daterange:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.40); } /* EITHER half being open is the whole field's focus state - it is one field now */ body:not(.dark) .mh-app .ad-daterange:has(.dp.open){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.52*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))) 100%); border-color:rgba(47,107,87,.55); box-shadow:0 0 0 3px rgba(47,107,87,.14),0 10px 24px -12px rgba(30,55,48,.32); } body.dark .mh-app .ad-daterange{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))) 100%); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } /* ---- 2. each picker stops being a field and becomes a segment of one ---- */ .mh-app .ad-daterange .dp{flex:1;min-width:0;width:auto} /* SPECIFICITY, AND I GOT THIS WRONG ONCE. The two halves are dressed as 999px #DFE4EA pills by `.mh-app .ad-daterange .ad-dp .dp-field` (mh-admin.css ~257) and `.mh-app .arch-filter .dp.arch-dp .dp-field` (mh-theme.css ~2938). COUNT THEM: the admin one is FOUR classes, the archived one is FIVE (.mh-app .arch-filter .dp .arch-dp .dp-field). I got this wrong twice - first with a three-class reset, then with a four-class one that still lost to the five. The selectors below are five and six, so each out-ranks its opponent outright. HOW IT WAS CAUGHT, WHICH IS THE REAL LESSON: by measuring background-COLOR, not background-image. The first check only asked whether a gradient was present, and `none` for a gradient is NOT the same as no background - the flat #DFE4EA pill was still being painted underneath the new shell the whole time, on a screen I had already called done. */ .mh-app .arch-filter .ad-daterange .dp.arch-dp .dp-field, .mh-app .ad-daterange .dp.ad-dp .dp-field{ height:100%;padding:0;gap:11px;border:0;border-radius:0; background:none;background-color:transparent;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; } /* and their hover / open pills, from the same two files */ .mh-app .arch-filter .ad-daterange .dp.arch-dp .dp-field:hover, .mh-app .ad-daterange .dp.ad-dp .dp-field:hover, .mh-app .arch-filter .ad-daterange .dp.arch-dp.open .dp-field, .mh-app .ad-daterange .dp.ad-dp.open .dp-field{ border:0;box-shadow:none;background-color:transparent; } /* ---- 3. ONE calendar mark, at the far left, with the kit's divider after it ---- */ .mh-app .ad-daterange .dp:first-of-type .dpf-ico{ width:19px;height:19px;flex:none;box-sizing:content-box; padding-right:11px;border-right:1px solid rgba(40,60,80,.16); color:var(--mh-ico-brand); } .mh-app .ad-daterange .dp:last-of-type .dpf-ico{display:none} /* the kit's range carries no chevrons */ .mh-app .ad-daterange .dpf-chev{display:none} /* ---- 4. the dates centre themselves, as the kit does with text-align:center ---- */ /* one line, always. 306px was measured against the "From" / "To" PLACEHOLDERS; the real content is "Sep 3, 2026", which wrapped to two lines inside its half. Measure the full state, not the empty one. */ .mh-app .ad-daterange .dpf-val{flex:1;text-align:center;white-space:nowrap} body:not(.dark) .mh-app .ad-daterange .dpf-val.empty{color:#6F7D89} /* ---- 5. "to" becomes the kit's ARROW - 16px, --ink-4 (#9AA7B3) ---- */ .mh-app .ad-daterange :is(.ad-dash,.arch-filter-sep){ font-size:0;line-height:0;color:transparent; width:16px;height:16px;flex:none;padding:0;border:0;background:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:center;background-size:16px 16px; } /* ---- 5b. NO BOX INSIDE THE BOX. I had marked the open half with a white wash so you could see which end of the range the calendar belonged to. Owner: "it has another shadow on it - remove that, it will be fine, it's like field under fields." He is right, and the wash is gone: a rounded panel inside a rounded panel reads as two controls, which is the exact thing this whole field was built to stop being. Nothing is lost by removing it. The SHELL still takes the pine focus ring, so the field reads as active, and now that both halves are typed (TYPEFIELD18) the CARET says which end you are editing - which is what a caret is for, and it does not draw a second box to say it. ---- */ /* ---- 6. the Clear button keeps its own space, OUTSIDE the field ---- */ .mh-app .arch-filter-row{gap:10px} /* ---- 7. the transparency guard: the kit's own flat surface is the honest fallback here ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app .ad-daterange{ background:var(--tg-well,rgb(223,228,234));-webkit-backdrop-filter:none;backdrop-filter:none; border-color:rgba(40,60,80,.10);box-shadow:inset 0 1px 2px rgba(40,60,80,.10); } } /* ============================================================================= CARDWX18 (22 September 2026) - THE RECORD CARDS TAKE THE TOPBAR GLASS. Owner, with a Case Note card and the Clients grid: "turn all KPI cards of the Clients and Case Notes and Programs and Services same as top bar ... those cards." These are the RECORD cards - a household, a note, a program, a service - not the small `.kpi-strip` tiles that CNKPI18 did yesterday. It is the question I flagged as open on 21 Sep and left for him ("cards are a separate decision"); this is his answer. THE FOUR, AND WHERE EACH STARTED: .cl-glass .idcard Clients already glass, but its OWN: flat rgba(255,255,255,.62) .cn-tl .c Case Notes already glass, but its OWN: 90% -> 70% + blur 20 .pg-card Program solid var(--mh-surface) .svc-card Services its own layered fill Two of them were near misses again - glass, but not THE glass - which is why the page never looked of a piece. All four now carry the top bar's recipe exactly: 42% -> 18% white, blur 22 + saturate 185% + brightness 1.06, the .85 white rim and the 105-degree reflection. BLUR COST, COUNTED BEFORE WRITING A LINE. Clients renders **94** household cards, and blurring a control that repeats per row is the one thing the blur cull (3z-v) exists to prevent. It is safe here only because those 94 were ALREADY blurred - `.cl-glass .idcard` has carried backdrop-filter since 18 September - so this changes the values, not the count. Same for `.cn-tl .c`. The only NEW blurs are `.pg-card` (~10 on screen) and `.svc-card` (a handful): page-level cards, not list rows. THE ONE THING NOT TOUCHED ON .idcard IS ITS BOX-SHADOW, and this is not fussiness. `.idcard` has NO border - the NEEDS-ATTENTION RING is drawn as a box-shadow. Rewriting the shadow here would have silently deleted that ring from all 94 cards, which is a real signal about real families. So the card takes the background, the blur and the rim, and its shadow is left to the rule that owns it. `.svc-card`'s ::before is already its accent hairline, so its reflection goes on ::after instead of overwriting it. `.hs-card` (Housing Subsidy) IS INCLUDED THOUGH HE NAMED ONLY FOUR PAGES. Housing Subsidy lives one level inside Services, and it was the only white card left in that section - exactly the "this one doesn't match" he has been sending screenshots about all week. Say the word and it comes back out; it is one selector in five places. ============================================================================= */ /* ---- 1. the surface: the top bar's, on all four ---- */ body:not(.dark) .mh-app .pg-stu-card, body:not(.dark) .mh-app .cl-glass .idcard, body:not(.dark) .mh-app .cn-tl .c, body:not(.dark) .mh-app .ns-bar--cap, body:not(.dark) .mh-app .pg-card, body:not(.dark) .mh-app .svc-card, body:not(.dark) .mh-app .hs-card{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06); backdrop-filter:blur(22px) saturate(185%) brightness(1.06); border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85)); position:relative;isolation:isolate; } /* the three that carry a shadow of their own take the float; .idcard is deliberately absent - its box-shadow IS the needs-attention ring (see the header) */ body:not(.dark) .mh-app .cn-tl .c, body:not(.dark) .mh-app .ns-bar--cap, body:not(.dark) .mh-app .pg-card, body:not(.dark) .mh-app .svc-card, body:not(.dark) .mh-app .hs-card{ box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,55,48,.06), 0 14px 32px -18px rgba(30,55,48,.40); } /* ---- 2. the reflection - ::before where it is free, ::after on .svc-card ---- */ body:not(.dark) .mh-app .pg-stu-card::before, body:not(.dark) .mh-app .cl-glass .idcard::before, body:not(.dark) .mh-app .cn-tl .c::before, body:not(.dark) .mh-app .ns-bar--cap::before, body:not(.dark) .mh-app .pg-card::before, body:not(.dark) .mh-app .svc-card::after, body:not(.dark) .mh-app .hs-card::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 42%, rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 50%,transparent 58%);opacity:.8; } /* ---- 3. hover: the glass thickens. Each card keeps its OWN lift - .cn-tl .c rises 4px, .svc-card zooms, .pg-card and .idcard have theirs - because that movement is the card's character and none of it is this rule's business. Only the fill changes. ---- */ body:not(.dark) .mh-app .pg-stu-card:hover, body:not(.dark) .mh-app .cl-glass .idcard:hover, body:not(.dark) .mh-app .cn-tl .c:hover, body:not(.dark) .mh-app .ns-bar--cap:hover, body:not(.dark) .mh-app .pg-card:hover, body:not(.dark) .mh-app .svc-card:hover, body:not(.dark) .mh-app .hs-card:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.56*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))) 100%); border-color:rgba(255,255,255,.95); } /* ---- 4. DARK ---- */ body.dark .mh-app .pg-stu-card, body.dark .mh-app .cl-glass .idcard, body.dark .mh-app .cn-tl .c, body.dark .mh-app .ns-bar--cap, body.dark .mh-app .pg-card, body.dark .mh-app .svc-card, body.dark .mh-app .hs-card{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.12); position:relative;isolation:isolate; } body.dark .mh-app .cn-tl .c, body.dark .mh-app .ns-bar--cap, body.dark .mh-app .pg-card, body.dark .mh-app .svc-card, body.dark .mh-app .hs-card{ box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 32px -18px rgba(0,0,0,.55); } /* ---- 5. the transparency guard - a record card is where the words are ---- */ @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app .pg-stu-card, body:not(.dark) .mh-app .cl-glass .idcard, body:not(.dark) .mh-app .cn-tl .c, body:not(.dark) .mh-app .ns-bar--cap, body:not(.dark) .mh-app .pg-card, body:not(.dark) .mh-app .svc-card, body:not(.dark) .mh-app .hs-card{ background:var(--mh-surface);-webkit-backdrop-filter:none;backdrop-filter:none; border-color:var(--mh-line); } body:not(.dark) .mh-app .pg-stu-card::before, body:not(.dark) .mh-app .cl-glass .idcard::before, body:not(.dark) .mh-app .cn-tl .c::before, body:not(.dark) .mh-app .ns-bar--cap::before, body:not(.dark) .mh-app .pg-card::before, body:not(.dark) .mh-app .svc-card::after, body:not(.dark) .mh-app .hs-card::before{display:none} } /* ============================================================================= PGROSTER18 (24 September 2026) - THE STUDENTS ROSTER TAKES THE TOPBAR GLASS. Owner, with the Students view (a term's roster): "did you change the Capacity and student KPI cards same as the TOPBAR? ... yes do it ... we will not leave those cards also behind, all must be standard like topbar as you did to others." He was right - CARDWX18 took `.cl-glass .idcard` (Clients) and `.pg-card` (Programs), but the roster's student card is `.idcard.pg-stu-card` OUTSIDE `.cl-glass`, and the capacity strip is `.ns-bar`, so both stayed solid white. They were ADDED TO CARDWX18'S OWN SELECTOR LISTS above (the student card beside `.cl-glass .idcard`, the capacity strip beside `.pg-card`) - one recipe, not a copy. Blur count: one card per student plus one strip - the same order as the Programs grid CARDWX18 already blurs. The student card's box-shadow is left alone, exactly as `.idcard`'s is. The avatars moved to the photo studio default in Program.razor (AvatarBg = the pine, no initials). What follows is only what those lists cannot say: the meter's groove on glass, the dashed "+ Enroll student" / "+ New Program" tile, and the card's Exit / Remove button. ============================================================================= */ /* the capacity meter: a groove IN the glass (the Program record's meter), not the flat cream bar */ body:not(.dark) .mh-app .ns-bar--cap .ns-meter{ background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));box-shadow:inset 0 1px 2px rgba(30,55,48,.12); } /* the + tile: the toolbar glass with its rim DASHED in pine so it still reads as "add here", and its plus the small-control glass; hover thickens the glass and the rim goes solid pine. */ body:not(.dark) .mh-app .pg-add{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); border:1.5px dashed rgba(47,107,87,.35);color:#375A50; transition:background .18s ease,border-color .18s ease,color .18s ease; } body:not(.dark) .mh-app .pg-add:hover{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.56*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))) 100%); border-style:solid;border-color:rgba(47,107,87,.55);color:#2A5F4D; } body:not(.dark) .mh-app .pg-add .plus{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.52*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.26);color:#2F6B57; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -10px rgba(30,55,48,.32); transition:background .2s,color .2s,transform .25s; } /* PLUSFIX18 (24 Sep): the filled circle drops its glass edge. It kept the resting circle's inset white highlight + pine hairline, and the 90deg turn swung that white line to one side - a crescent "behind" the circle that made the + read off-centre (the glyph itself measured 0.00px off). Solid pine edge, glow only. */ body:not(.dark) .mh-app .pg-add:hover .plus{background:#2F6B57;color:#fff;transform:rotate(90deg); border-color:#2F6B57;box-shadow:none} /* PLUSFIX18b: and NO glow on hover - its 6px downward offset put a green shadow under the circle that read as "something on the back" and made the filled circle look lower than centre. Clean fill only. */ /* Exit / Remove on a student card: the toolbar's small-control glass (.cl-filterbtn's values) - NO blur, it repeats once per card (the blur-cull rule). Its hover keeps the danger meaning. */ body:not(.dark) .mh-app .pg-exit-btn{ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.26);color:#5E7268; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05),0 6px 16px -10px rgba(30,55,48,.32); } body:not(.dark) .mh-app .pg-exit-btn:hover{ background:rgba(176,70,60,.10);border-color:rgba(176,70,60,.45);color:var(--mh-danger); } @media (prefers-reduced-motion: reduce){ body:not(.dark) .mh-app .pg-add:hover .plus{transform:none} } /* DARK - the same pieces on the dark glass */ body.dark .mh-app .ns-bar--cap .ns-meter{background:rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1)));box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} body.dark .mh-app .pg-add{background:rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1)));border:1.5px dashed rgba(143,187,165,.3);color:#8FBBA5} body.dark .mh-app .pg-add:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1)));border-style:solid;border-color:rgba(143,187,165,.5)} body.dark .mh-app .pg-add .plus{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));color:#8FBBA5} /* ============================================================================= PGPANEL18 (24 September 2026) - THE REST OF THE PROGRAM PAGE TAKES THE TOPBAR GLASS. Same instruction ("we will not leave those cards also behind, all must be standard like topbar"). Swept every Program view with a computed-background scan (opaque surfaces over 4000px2): Attendance the matrix panel (section.card) + its sticky header row / name column Program Sessions the kiosk status strip (.ns-bar.ns-kiosk), Today's sessions (.card.ns-roster), the schedule panel (.card) and their flat #F1F4F7 table headers Gift Card both panels (.card) and their table headers Programs, Students (term cards + the roster, PGROSTER18) and the Attendance term cards were already the glass. Only a dropdown list stays white - lists are white by the field standard. SCOPED TO `.pg-body` - `.card` and `.ns-bar` are app-wide classes, and this is the Program page's pass. The panel takes CARDWX18's recipe value for value (42->18% white, blur 22 + saturate 185% + brightness 1.06, the .85 rim, the float and the 105-degree reflection); panels do not lift. A handful of panels per view - page-level, not per-row, so the blur count stays small. THE ATTENDANCE GRID'S STICKY CELLS CANNOT BE CLEAR GLASS: the name column and the header row stay put while the day columns scroll under them, so a see-through sticky cell would show the scrolled marks through the student's name. They take a near-opaque white (.92, the tile family's firmest) instead of the flat surface white; every other cell is clear, so the glass reads through the grid. ============================================================================= */ body:not(.dark) .mh-app .pg-body :is(section.card,.ns-bar:not(.ns-bar--cap)){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06); backdrop-filter:blur(22px) saturate(185%) brightness(1.06); border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85)); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,55,48,.06), 0 14px 32px -18px rgba(30,55,48,.40); position:relative;isolation:isolate; } body:not(.dark) .mh-app .pg-body :is(section.card,.ns-bar:not(.ns-bar--cap))::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 42%, rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 50%,transparent 58%);opacity:.8; } /* the table headers: the flat #F1F4F7 band becomes a light tile band on the glass */ body:not(.dark) .mh-app .pg-body section.card thead th{ background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));border-bottom-color:rgba(30,55,48,.10); } /* the attendance grid: clear cells, near-opaque sticky ones (see the header) */ body:not(.dark) .mh-app .pg-body .att-grid thead th{background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)))} body:not(.dark) .mh-app .pg-body .att-grid thead th.att-stick, body:not(.dark) .mh-app .pg-body .att-grid thead th.att-ptscol, body:not(.dark) .mh-app .pg-body .att-stick{background:rgba(var(--tg-rgb,255,255,255),.92)} body:not(.dark) .mh-app .pg-body .att-trow:hover .att-stick, body:not(.dark) .mh-app .pg-body .att-trow.kid .att-stick{background:color-mix(in srgb, var(--tg-cream2,rgb(244,248,246)) 96%, transparent)} body:not(.dark) .mh-app .pg-body .att-grid td:not(.att-stick):not(.att-cell.closed):not(.att-cell.noclass){background:transparent} @media (prefers-reduced-transparency: reduce){ body:not(.dark) .mh-app .pg-body :is(section.card,.ns-bar:not(.ns-bar--cap)){ background:var(--mh-surface);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--mh-line); } body:not(.dark) .mh-app .pg-body :is(section.card,.ns-bar:not(.ns-bar--cap))::before{display:none} } /* DARK - CARDWX18's dark glass */ body.dark .mh-app .pg-body :is(section.card,.ns-bar:not(.ns-bar--cap)){ background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1))) 100%); -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 32px -18px rgba(0,0,0,.55); position:relative;isolation:isolate; } /* ============================================================================= PGPOP18 (24 September 2026) - THE PROGRAM PAGE'S OWN POPUPS JOIN THE STANDARD. Owner: "deploy all PROGRAM TAB all of them ... follow our new standard roles everywhere and make sure everything landed correctly". The record, the wizards and the page panels were done (4p-4r, TERMWIZ18); what was left were the page's own popups, still on the pre-standard white card: Issue gift card, Set your PIN first, the completion report, the attendance detail and Late check-in points. Each is now put on objects the standard already has - nothing new drawn: window = the wizard window (PGBG18): the canvas, 26 radius, .6 white rim, the 0 30px 80px pine shadow, the green-grey rgba(33,42,38,.5) backdrop card = the Mint card / wizard section card (.4 glass, .72 rim, 22, -26px shadow) value / stat = the TILE (.72, .85 rim, 16, the dot on the label's middle) row / person = the household member card (.4 / .72 / 17, lifts 3px) chips = the tab-row twin (glass, the mint gradient on the chosen one) buttons = the footer pair (FOOTBTN18 values), the close X = the mini glass button Opt-in by class (`pgp-*` on the markup, grepped unused app-wide), so no other page moves. The late-points window is `#latePts` (it shares program-wizards.css's base shell). END of file. ============================================================================= */ /* ---- 1. THE BACKDROP AND THE WINDOW ---- */ .mh-app .pl-overlay.pgp-ov, .mh-app .qr-modal.pgp-ov{background:rgba(33,42,38,.5)} .mh-app .pgp-win.pgp-win{ background:var(--mh-canvas,#E1E6EB);color:#1C2A25; border:1px solid rgba(255,255,255,.6);border-radius:26px; box-shadow:0 30px 80px rgba(33,58,51,.26); } .mh-app .pgp-win h3{color:#1C2A25;font-weight:800;letter-spacing:-.01em} .mh-app .pgp-win .rsn-sub, .mh-app .pgp-win .rp-meta{color:#7A8A84} .mh-app .pgp-win .rsn-sub b{color:#1C2A25} /* the icon bubble - the section card's white bubble; an amber meaning keeps its amber ink */ .mh-app .pgp-win .rsn-ic{ background:rgb(var(--tg-rgb,255,255,255)) !important;border-radius:14px; box-shadow:0 4px 10px -4px rgba(30,55,48,.45),inset 0 0 0 1px rgba(47,107,87,.28); } .mh-app .pgp-win .rsn-l{font-size:10px;font-weight:800;letter-spacing:.1em;color:#7A8A84} /* ---- 2. THE CLOSE X - the mini glass button ---- */ .mh-app .pgp-x.pgp-x{ position:relative;flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;cursor:pointer; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1))) !important;border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72));color:#375A50 !important; font-size:22px;line-height:1; box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 16px 34px -18px rgba(30,55,48,.26); transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease; } .mh-app .pgp-x.pgp-x:hover{ background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))) !important;color:#1C2733 !important;transform:translateY(-2px); box-shadow:0 3px 7px -4px rgba(30,55,48,.18),0 10px 20px -10px rgba(30,55,48,.26),inset 0 0 0 1px rgba(255,255,255,.85); } .mh-app .pgp-x.pgp-x:focus-visible{outline:2px solid #2F6B57;outline-offset:3px} /* ---- 3. THE GLASS CARD ---- */ .mh-app .pgp-card{ padding:14px;border-radius:22px; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72)); box-shadow:0 22px 54px -26px rgba(30,55,48,.42); } /* ---- 4. THE TILE - a stat is a tile whose LABEL sits on top (the markup says value then label, so the column is reversed rather than the markup re-ordered) ---- */ .mh-app .pgp-win :is(.rp-stat,.adstat), .mh-app .pgp-tile{ position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;min-width:0; padding:12px 16px 14px 30px;border-radius:16px;text-align:left; background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85)); box-shadow:0 6px 16px -12px rgba(30,55,48,.35); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; } .mh-app .pgp-win :is(.rp-stat,.adstat)::before, .mh-app .pgp-tile::before{ content:"";position:absolute;left:14px;top:14px;width:7px;height:7px;border-radius:50%; background:#2F6B57;box-shadow:0 0 0 3px rgba(47,107,87,.14); } .mh-app .pgp-win :is(.rp-stat,.adstat):hover, .mh-app .pgp-tile:hover{ background:rgba(var(--tg-rgb,255,255,255),.85);transform:translateY(-3px); box-shadow:0 4px 10px -6px rgba(30,55,48,.16),0 18px 38px -18px rgba(30,55,48,.30); } .mh-app .pgp-win :is(.rp-stat,.adstat) span{ display:block;margin:0;font-size:10px;font-weight:800;letter-spacing:.1em;line-height:12.5px; text-transform:uppercase;color:#7A8A84; } .mh-app .pgp-win :is(.rp-stat,.adstat) b{ display:block;font-family:var(--mh-font-body);font-size:16px;font-weight:650;line-height:24px; letter-spacing:0;color:#1C2A25;font-variant-numeric:tabular-nums; } /* ---- 5. THE FOOTER PAIR (FOOTBTN18) ---- */ .mh-app .pgp-foot{ --fb-grad:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.18), rgba(255,255,255,0) 42%), linear-gradient(162deg, #42856E 0%, #2F6B57 60%, #2A5749 100%); display:flex;align-items:center;justify-content:flex-end;gap:12px; } .mh-app .pgp-foot .ui-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; height:48px;padding:0 22px;border-radius:12px;font-family:var(--mh-font-body);font-size:14.5px;font-weight:700;cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease; } .mh-app .pgp-foot .ui-btn::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;border-radius:inherit} .mh-app .pgp-foot .ui-btn svg{width:18px;height:18px} .mh-app .pgp-foot .ui-btn.primary{background:var(--fb-grad);color:#fff;border:1px solid transparent;box-shadow:0 4px 12px -2px rgba(47,107,87,.42)} .mh-app .pgp-foot .ui-btn.primary:hover:not(:disabled){box-shadow:0 8px 20px -4px rgba(47,107,87,.5)} .mh-app .pgp-foot .ui-btn.secondary{ background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));color:#375A50;border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72)); box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 16px 34px -18px rgba(30,55,48,.26); -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%); } .mh-app .pgp-foot .ui-btn.secondary:hover:not(:disabled){ background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:#1C2733; box-shadow:0 3px 7px -4px rgba(30,55,48,.18),0 10px 20px -10px rgba(30,55,48,.26),inset 0 0 0 1px rgba(255,255,255,.85); } .mh-app .pgp-foot .ui-btn:hover:not(:disabled){transform:translateY(-2px)} .mh-app .pgp-foot .ui-btn:active:not(:disabled){transform:translateY(0)} .mh-app .pgp-foot .ui-btn:disabled{opacity:.6;cursor:default} /* ---- 6. THE ERROR BAR (the record's .mint-err) ---- */ .mh-app .pgp-err{ display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:11px 14px;border-radius:14px; background:var(--danger-bg,#FBEAE8);border:1px solid rgba(176,70,60,.35);color:#8A2F28; font-size:13.5px;font-weight:650; } /* ---- 7. ISSUE GIFT CARD - the value chips are the tab-row twin; the custom amount is a tile input ---- */ .mh-app .pgp-win .gc-values{gap:6px;padding:5px;border-radius:15px; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72)); box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 16px 34px -18px rgba(30,55,48,.26)} .mh-app .pgp-win .gc-vchip{ flex:1;min-width:64px;border:0;border-radius:10px;padding:10px 12px;background:transparent;color:#677579; font-size:13px;font-weight:800;letter-spacing:.02em; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease; } .mh-app .pgp-win .gc-vchip:not(.on):hover{ background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:#1C2733;transform:translateY(-2px); box-shadow:0 3px 7px -4px rgba(30,55,48,.18),0 10px 20px -10px rgba(30,55,48,.26),inset 0 0 0 1px rgba(255,255,255,.85); } .mh-app .pgp-win .gc-vchip.on{ background:radial-gradient(120% 55% at 90% 3%, rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))), rgba(255,255,255,0) 42%), linear-gradient(162deg,#42856E 0%,#2F6B57 60%,#2A5749 100%); color:#fff;box-shadow:0 4px 12px -2px rgba(47,107,87,.42); } .mh-app .pgp-win .gc-thumb.on{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 6px #2F6B57,0 4px 12px rgba(0,0,0,.20)} .mh-app .pgp-win input.pgp-in{ width:100%;height:auto;margin:0;padding:12px 16px;border-radius:16px; background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))) !important;border:1px solid rgba(255,255,255,.85) !important; box-shadow:0 6px 16px -12px rgba(30,55,48,.35); font-family:var(--mh-font-body);font-size:16px;font-weight:650;color:#1C2A25; } .mh-app .pgp-win input.pgp-in::placeholder{color:#98A5AE;font-weight:500} .mh-app .pgp-win input.pgp-in:focus{outline:none;background:rgb(var(--tg-rgb,255,255,255)) !important;border-color:rgba(47,107,87,.55) !important;box-shadow:0 0 0 3px rgba(47,107,87,.13)} /* ---- 8. THE COMPLETION REPORT - stats are tiles, the student table sits in a glass card ---- */ .mh-app .pgp-win.report-card{padding:26px 28px 24px} /* three to a row, like the record's stat tiles (pgl-stats) - at five the labels wrapped onto two lines */ .mh-app .pgp-win .rp-stats{gap:11px;grid-template-columns:repeat(3,1fr)} .mh-app .pgp-win .rp-tbl{border-collapse:separate;border-spacing:0} .mh-app .pgp-win .rp-tbl th{padding:4px 12px 10px;font-size:10px;font-weight:800;letter-spacing:.1em;color:#7A8A84;border-bottom:1px solid rgba(30,55,48,.1)} .mh-app .pgp-win .rp-tbl td{padding:12px;font-size:14px;font-weight:600;color:#1C2A25;border-bottom:1px solid rgba(30,55,48,.07)} .mh-app .pgp-win .rp-tbl tbody tr:last-child td{border-bottom:0} .mh-app .pgp-win .rp-tbl tbody tr:hover td{background:rgba(var(--tg-rgb,255,255,255),calc(.5*var(--tg-k,1)))} .mh-app .pgp-win .rp-foot{margin-top:20px} /* ---- 9. THE ATTENDANCE DETAIL - the roster is member cards on the canvas, the month sits in a glass card, the class days are tiles, the four figures are tiles ---- */ .mh-app .pgp-win.adx-card{overflow:hidden} .mh-app .pgp-win .adx-rail{background:rgba(var(--tg-rgb,255,255,255),calc(.22*var(--tg-k,1)));border-right:1px solid rgba(255,255,255,.6)} .mh-app .pgp-win .adx-railh, .mh-app .pgp-win .adx-kidslbl{font-size:10px;letter-spacing:.1em;color:#7A8A84} .mh-app .pgp-win .adx-ros{ margin-bottom:8px;padding:10px 12px;border-radius:17px; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72)); box-shadow:0 14px 34px -22px rgba(30,55,48,.38); transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease; } .mh-app .pgp-win .adx-ros:hover{ transform:translateY(-3px);background:rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1)));border-color:rgba(255,255,255,.9); box-shadow:0 4px 10px -6px rgba(30,55,48,.16),0 18px 38px -18px rgba(30,55,48,.30); } .mh-app .pgp-win .adx-ros.on{ background:rgba(var(--tg-rgb,255,255,255),.85);border-color:rgba(255,255,255,.95); box-shadow:inset 0 0 0 1.5px rgba(47,107,87,.55),0 14px 34px -22px rgba(30,55,48,.38); } .mh-app .pgp-win .adx-ros .av{ border-radius:50%;border:2px solid rgba(234,241,237,.5);color:#F4F0E6; box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),0 6px 16px -6px rgba(0,0,0,.28); } .mh-app .pgp-win .adx-rnm{color:#1C2A25} .mh-app .pgp-win .adx-rsub{color:#7A8A84} .mh-app .pgp-win .adx-rbar{background:rgba(30,55,48,.14)} .mh-app .pgp-win .adx-rbar i{background:linear-gradient(90deg,#2F6B57,#5FCFA4)} .mh-app .pgp-win .adx-detail .ad-cal{ padding:14px;border-radius:22px; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72)); box-shadow:0 22px 54px -26px rgba(30,55,48,.42); } .mh-app .pgp-win .adx-detail .ad-cal .dcal-head span{color:#7A8A84} .mh-app .pgp-win .adx-detail .ad-cal .dcell.meet{ background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));color:#1C2A25; box-shadow:0 6px 16px -12px rgba(30,55,48,.35); } .mh-app .pgp-win .adx-detail .ad-cal .dcell.noclass{background:rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1)));border:1px dashed rgba(30,55,48,.12);color:#8A9A94} .mh-app .pgp-win .adx-detail .ad-cal .dcell.closed{background:rgba(201,123,90,.12);border:1px solid rgba(201,123,90,.18)} .mh-app .pgp-win .adx-detail .ad-cal .dcell.today::after{box-shadow:0 0 0 2px #2F6B57} .mh-app .pgp-win .adx-detail .ad-stats{gap:11px} /* ---- 10. LATE CHECK-IN POINTS (#latePts) - the wizard window, the tile, the chips, tick rows ---- */ #latePts{background:rgba(33,42,38,.5)} /* height:auto - Bootstrap's global `.modal{height:100%}` stretched this window to 852px with a 380px empty band under its footer (measured: head 71 + body 310 + foot 91 = 472). */ #latePts .modal.lp2{ height:auto;max-height:calc(100% - 8px); background:var(--mh-canvas,#E1E6EB);border-radius:26px;border:1px solid rgba(255,255,255,.6); box-shadow:0 30px 80px rgba(33,58,51,.26); } #latePts .lp-kicker{color:#2F6B57;font-size:10.5px;font-weight:800;letter-spacing:.1em} #latePts .lp-title{color:#1C2A25} #latePts .lp-who{ padding:12px 14px;border-radius:17px; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72)); box-shadow:0 14px 34px -22px rgba(30,55,48,.38); } #latePts .lp-av{border:2px solid rgba(234,241,237,.5);color:#F4F0E6;box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),0 6px 16px -6px rgba(0,0,0,.28)} #latePts .lp-nm{color:#1C2A25} #latePts .lp-sub,#latePts .lp-cap{color:#7A8A84} #latePts .lp-body .field{ position:relative;display:flex;flex-direction:column;gap:8px; padding:12px 16px 14px 30px;border-radius:16px; background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85)); box-shadow:0 6px 16px -12px rgba(30,55,48,.35); } #latePts .lp-body .field::before{ content:"";position:absolute;left:14px;top:14px;width:7px;height:7px;border-radius:50%; background:#2F6B57;box-shadow:0 0 0 3px rgba(47,107,87,.14); } #latePts .lp-body .field:focus-within{background:rgb(var(--tg-rgb,255,255,255));border-color:rgba(47,107,87,.55);box-shadow:0 0 0 3px rgba(47,107,87,.13)} #latePts .lp-body .field>label{font-size:10px;font-weight:800;letter-spacing:.1em;line-height:12.5px;text-transform:uppercase;color:#7A8A84;margin:0} #latePts .lp-body .field .icf, #latePts .lp-body .field .icf:hover, #latePts .lp-body .field .icf:focus-within{min-height:24px;padding:0;background:none;border:0;box-shadow:none;border-radius:0} #latePts .lp-body .icf input{font-size:16px;font-weight:650;line-height:24px;height:24px;color:#1C2A25;font-variant-numeric:tabular-nums} #latePts .lp-chips{gap:6px;padding:5px;border-radius:15px;align-self:flex-start; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72))} #latePts .lp-chip{border:0;border-radius:10px;padding:8px 14px;background:transparent;color:#677579;font-size:12.5px;font-weight:800; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease} #latePts .lp-chip:not(.on):hover{background:rgba(var(--tg-rgb,255,255,255),.85);color:#1C2733;transform:translateY(-2px)} #latePts .lp-chip.on{ background:radial-gradient(120% 55% at 90% 3%, rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))), rgba(255,255,255,0) 42%), linear-gradient(162deg,#42856E 0%,#2F6B57 60%,#2A5749 100%); color:#fff;box-shadow:0 4px 12px -2px rgba(47,107,87,.42); } #latePts .lp-kids{border-top:0;padding-top:0} #latePts .lp-kids-h{font-size:10px;font-weight:800;letter-spacing:.1em;color:#7A8A84} #latePts .lp-kid{ padding:11px 14px;border-radius:17px; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72)); box-shadow:0 14px 34px -22px rgba(30,55,48,.38); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; } #latePts .lp-kid:hover{transform:translateY(-2px);background:rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1)));border-color:rgba(255,255,255,.9)} #latePts .lp-kid.on{background:rgba(var(--tg-rgb,255,255,255),.85);border-color:rgba(255,255,255,.95);box-shadow:inset 0 0 0 1.5px rgba(47,107,87,.55)} /* the tick = TICK18: the ring, the gradient tick when on */ #latePts .lp-kid-box{width:22px;height:22px;border-radius:50%;border:2px solid rgba(47,107,87,.35);background:transparent} #latePts .lp-kid.on .lp-kid-box{border-color:#2F6B57;background:linear-gradient(135deg,#2F6B57,#5FCFA4)} #latePts .lp-kid-nm{color:#1C2A25} #latePts .lp-kid-sub{color:#7A8A84} #latePts .lp-foot{ --fb-grad:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.18), rgba(255,255,255,0) 42%), linear-gradient(162deg, #42856E 0%, #2F6B57 60%, #2A5749 100%); gap:12px;padding:18px 30px 24px;border-top:1px solid #D9DFE7;background:var(--mh-canvas,#E1E6EB); } #latePts .lp-foot .ui-btn{ position:relative;height:48px;padding:0 22px;border-radius:12px;font-size:14.5px;font-weight:700;gap:9px; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));color:#375A50;border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72)); box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 16px 34px -18px rgba(30,55,48,.26); transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease; } #latePts .lp-foot .ui-btn:hover:not(:disabled){background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:#1C2733;transform:translateY(-2px)} #latePts .lp-foot .ui-btn.primary{background:var(--fb-grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px -2px rgba(47,107,87,.42)} #latePts .lp-foot .ui-btn.primary:hover:not(:disabled){background:var(--fb-grad);color:#fff;box-shadow:0 8px 20px -4px rgba(47,107,87,.5)} @media (prefers-reduced-motion: reduce){ .mh-app .pgp-x:hover, .mh-app .pgp-foot .ui-btn:hover, .mh-app .pgp-tile:hover, .mh-app .pgp-win :is(.rp-stat,.adstat):hover, .mh-app .pgp-win .adx-ros:hover, .mh-app .pgp-win .gc-vchip:hover, #latePts .lp-chip:hover, #latePts .lp-kid:hover, #latePts .lp-foot .ui-btn:hover{transform:none} } /* ---- DARK - the same objects' dark values (the wizard window rgb(34,43,39), glass .05 / .14 rim) ---- */ body.dark .mh-app .pgp-win.pgp-win, body.dark #latePts .modal.lp2, body.dark #latePts .lp-foot{background:rgb(34,43,39);border-color:rgba(180,210,235,.14);color:#EAF0F4} body.dark #latePts .lp-foot{border-top-color:rgb(51,64,58)} body.dark .mh-app .pgp-win h3, body.dark .mh-app .pgp-win .rsn-sub b, body.dark #latePts .lp-title, body.dark #latePts .lp-nm, body.dark #latePts .lp-kid-nm{color:#EAF0F4} body.dark .mh-app .pgp-win .rsn-ic{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1))) !important;box-shadow:inset 0 0 0 1px rgba(180,210,235,.18)} body.dark .mh-app .pgp-x.pgp-x, body.dark .mh-app .pgp-foot .ui-btn.secondary, body.dark #latePts .lp-foot .ui-btn:not(.primary){background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))) !important;border-color:rgba(180,210,235,.14);color:#8FBBA5 !important;box-shadow:none} body.dark .mh-app .pgp-x.pgp-x:hover, body.dark .mh-app .pgp-foot .ui-btn.secondary:hover:not(:disabled){background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) !important;color:#EAF0F4 !important} body.dark .mh-app .pgp-card, body.dark .mh-app .pgp-win .adx-detail .ad-cal, body.dark .mh-app .pgp-win .gc-values, body.dark #latePts .lp-chips{background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 22px 54px -26px rgba(0,0,0,.7)} body.dark .mh-app .pgp-win :is(.rp-stat,.adstat), body.dark .mh-app .pgp-tile, body.dark .mh-app .pgp-win .adx-detail .ad-cal .dcell.meet, body.dark #latePts .lp-body .field, body.dark .mh-app .pgp-win input.pgp-in{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))) !important;border-color:rgba(180,210,235,.14) !important;box-shadow:0 6px 16px -12px rgba(0,0,0,.55);color:#EAF0F4} body.dark .mh-app .pgp-win :is(.rp-stat,.adstat)::before, body.dark .mh-app .pgp-tile::before, body.dark #latePts .lp-body .field::before{background:#5FCFA4;box-shadow:0 0 0 3px rgba(95,207,164,.18)} body.dark .mh-app .pgp-win :is(.rp-stat,.adstat) b, body.dark .mh-app .pgp-win .rp-tbl td, body.dark .mh-app .pgp-win .adx-rnm, body.dark #latePts .lp-body .icf input{color:#EAF0F4} body.dark .mh-app .pgp-win :is(.rp-stat,.adstat) span, body.dark .mh-app .pgp-win .rp-tbl th{color:#8C9AA5} body.dark .mh-app .pgp-win .rp-tbl td{border-bottom-color:rgba(180,210,235,.08)} body.dark .mh-app .pgp-win .adx-rail{background:rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1)));border-right-color:rgba(180,210,235,.12)} body.dark .mh-app .pgp-win .adx-ros, body.dark #latePts .lp-who, body.dark #latePts .lp-kid{background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 14px 34px -22px rgba(0,0,0,.65)} body.dark .mh-app .pgp-win .adx-ros.on, body.dark #latePts .lp-kid.on{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)));box-shadow:inset 0 0 0 1.5px rgba(95,207,164,.5)} body.dark .mh-app .pgp-win .adx-detail .ad-cal .dcell.noclass{background:rgba(var(--tg-rgb,255,255,255),calc(.02*var(--tg-k,1)));border-color:rgba(180,210,235,.12)} body.dark .mh-app .pgp-win .gc-vchip{color:#8C9AA5} body.dark .mh-app .pgp-win .gc-vchip:not(.on):hover, body.dark #latePts .lp-chip:not(.on):hover{background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));color:#EAF0F4} /* ---- 11. THE PAGE'S OWN PRIMARY BUTTONS (Launch Kiosk, Issue Gift Card, the empty states' first action) take the footer standard's primary: the mint gradient with its sheen and pine glow, white ink, 12 radius, lifting 2px on hover (FOOTBTN18 / the 3o hover). Found by the page scan: Launch Kiosk was the one flat #4E7C72 slab left on Program Sessions. Scoped to `.pg-body` so the topbar's own "+ New ..." action keeps its look. ---- */ .mh-app .pg-body .btn.btn--primary{ background:radial-gradient(120% 55% at 90% 3%, rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))), rgba(255,255,255,0) 42%), linear-gradient(162deg,#42856E 0%,#2F6B57 60%,#2A5749 100%); color:#fff;border:1px solid transparent;border-radius:12px; box-shadow:0 4px 12px -2px rgba(47,107,87,.42); transition:transform .18s ease,box-shadow .18s ease; } .mh-app .pg-body .btn.btn--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px -4px rgba(47,107,87,.5)} .mh-app .pg-body .btn.btn--primary:active:not(:disabled){transform:translateY(0)} body.dark .mh-app .pg-body .btn.btn--primary{ background:radial-gradient(120% 55% at 90% 3%, rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))), rgba(255,255,255,0) 42%), linear-gradient(162deg,#3E7A66 0%,#2E5F4E 60%,#274F42 100%); box-shadow:0 4px 12px -2px rgba(0,0,0,.5); } @media (prefers-reduced-motion: reduce){ .mh-app .pg-body .btn.btn--primary:hover{transform:none} } /* ---- 12. A LIST ROW'S HOVER on the glass panels (Today's sessions, Program terms, Gift cards): the row firms to a glass wash instead of the solid #F4F7F9 slab - which in dark mode lit a full-width WHITE bar under the pointer (found in the dark walk, 24 Sep). ---- */ .mh-app .pg-body .row-open:hover, .mh-app .pg-body .row-open:focus-visible{background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)))} body.dark .mh-app .pg-body .row-open:hover, body.dark .mh-app .pg-body .row-open:focus-visible{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)))} /* ============================================================================= SCROLL28 - ONE SCROLLBAR FOR THE WHOLE APP (owner, 28 Sep 2026: "change that roller ... same as our new standard, white or glassy" -> "all of them, investigate across all and change them" -> "add on each side arrow up and down ... all looks must be same"). The census found 144 scrollbar rules in 17 stylesheets, each its own colour and width (beige, cream-grey, slate, 6 / 8 / 10 / 12px, thin with no arrows). They are superseded HERE, once - the next screen built inherits it too. THE LOOK: a white glass thumb with a pine hairline, a faint pine track, and pine arrow buttons at both ends (left / right on a sideways list), 14px everywhere. Dark mode: a soft white thumb and pale arrows. The pine side rail (Mail) gets pale arrows so they read on dark green. HOW (Chrome / Edge): the webkit scrollbar parts are styled, and scrollbar-width / scrollbar-color are RESET to auto on every element - in Chrome 121+ either one being set switches the webkit parts OFF (that is why the kiosk list stayed beige). HIDDEN scrollbars stay hidden: all 18 in the app also carry ::-webkit-scrollbar{display:none}, which this does not touch (display is never set here). Firefox has no webkit parts, so it keeps its own rules plus a matching colour pair - its hidden scrollbars untouched. ============================================================================= */ @supports selector(::-webkit-scrollbar) { html, html * { scrollbar-width: auto !important; scrollbar-color: auto !important; } :is(html, html *)::-webkit-scrollbar { width: 14px !important; height: 14px !important; } :is(html, html *)::-webkit-scrollbar-track { background: rgba(30,55,48,.06) !important; border-radius: 999px !important; box-shadow: none !important; border: 0 !important; } :is(html, html *)::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--tg-rgb,255,255,255),.98), rgba(var(--tg-rgb,255,255,255),.84)) !important; background-clip: padding-box !important; border: 3px solid transparent !important; border-radius: 999px !important; min-height: 36px; box-shadow: inset 0 0 0 1px rgba(30,55,48,.18), 0 2px 6px -2px rgba(30,55,48,.25) !important; } :is(html, html *)::-webkit-scrollbar-thumb:hover { background: rgb(var(--tg-rgb,255,255,255)) !important; background-clip: padding-box !important; box-shadow: inset 0 0 0 1px rgba(47,107,87,.4) !important; } :is(html, html *)::-webkit-scrollbar-corner { background: transparent !important; } :is(html, html *)::-webkit-scrollbar-button { width: 14px !important; height: 14px !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 10px 10px !important; border-radius: 6px; } :is(html, html *)::-webkit-scrollbar-button:hover { background-color: rgba(47,107,87,.10) !important; } /* one arrow at each end only */ :is(html, html *)::-webkit-scrollbar-button:single-button { display: block; } :is(html, html *)::-webkit-scrollbar-button:vertical:start:increment, :is(html, html *)::-webkit-scrollbar-button:vertical:end:decrement, :is(html, html *)::-webkit-scrollbar-button:horizontal:start:increment, :is(html, html *)::-webkit-scrollbar-button:horizontal:end:decrement { display: none !important; } :is(html, html *)::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='%23375A50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } :is(html, html *)::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23375A50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } :is(html, html *)::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 4l-4 4 4 4' fill='none' stroke='%23375A50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } :is(html, html *)::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%23375A50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* DARK MODE and the PINE RAIL: soft white thumb, pale arrows */ body.dark ::-webkit-scrollbar-track, #mhMail .ml-rail ::-webkit-scrollbar-track, #mhMail .ml-rail::-webkit-scrollbar-track { background: rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))) !important; } body.dark ::-webkit-scrollbar-thumb, #mhMail .ml-rail ::-webkit-scrollbar-thumb { background: rgba(var(--tg-rgb,255,255,255),calc(.30*var(--tg-k,1))) !important; background-clip: padding-box !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important; } body.dark ::-webkit-scrollbar-thumb:hover, #mhMail .ml-rail ::-webkit-scrollbar-thumb:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.45*var(--tg-k,1))) !important; background-clip: padding-box !important; } body.dark ::-webkit-scrollbar-button:hover, #mhMail .ml-rail ::-webkit-scrollbar-button:hover { background-color: rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) !important; } body.dark ::-webkit-scrollbar-button:vertical:decrement, #mhMail .ml-rail ::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='%23E7F0EC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } body.dark ::-webkit-scrollbar-button:vertical:increment, #mhMail .ml-rail ::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23E7F0EC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } body.dark ::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 4l-4 4 4 4' fill='none' stroke='%23E7F0EC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } body.dark ::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%23E7F0EC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } } @supports not selector(::-webkit-scrollbar) { html, html * { scrollbar-color: rgba(255,255,255,.96) rgba(30,55,48,.12); } body.dark, body.dark * { scrollbar-color: rgba(255,255,255,.34) rgba(255,255,255,.05); } } /* SCROLL28-DD - EVERY DROPDOWN / LOOKUP LIST SHOWS ITS SCROLLBAR (owner, 28 Sep: "investigate the drop down menus, the lookup wizards - some of them are hidden - activate them all and deploy the same style ... don't miss a piece"). The census (every stylesheet parsed, multi-line rules included) found the dropdown lists that HID their scrollbar: every `.selpop` (record dropdowns #mhDetail/#hhDetail, Enroll + the Case Note wizards, Add Household + Add Family Member, New Program + New Term) and the global search results `.search-pop`. They are switched ON here and wear SCROLL28 above. Panels that hide theirs on purpose (record rails / bodies, tab rows, the sidebar, the kiosk kids row) are NOT dropdowns and are left alone. Every other list in the census already showed its scrollbar. */ @supports selector(::-webkit-scrollbar) { :is(html *) :is(.selpop, .search-pop)::-webkit-scrollbar { display: block !important; } } @supports not selector(::-webkit-scrollbar) { :is(html *) :is(.selpop, .search-pop) { scrollbar-width: auto !important; } } /* SCROLL28-RAIL - the PINE side panels that scroll (Add Household / Add Family Member `.dzaside`, New Program / New Term / Late Points `.rail-scroll`, Mail `.ml-rscroll`, the older client detail `.c-side`): soft white thumb and PALE arrows - pine arrows vanish on dark green (found at 1:1 on Add Household, 28 Sep). The record and Enroll-wizard rails hide their scrollbar on purpose and stay hidden (display:none is never set here). */ @supports selector(::-webkit-scrollbar) { :is(.dzaside, .rail-scroll, #clDetail .c-side, #mhMail .ml-rscroll)::-webkit-scrollbar-track { background: rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))) !important; } :is(.dzaside, .rail-scroll, #clDetail .c-side, #mhMail .ml-rscroll)::-webkit-scrollbar-thumb { background: rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) !important; background-clip: padding-box !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important; } :is(.dzaside, .rail-scroll, #clDetail .c-side, #mhMail .ml-rscroll)::-webkit-scrollbar-thumb:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.5*var(--tg-k,1))) !important; background-clip: padding-box !important; } :is(.dzaside, .rail-scroll, #clDetail .c-side, #mhMail .ml-rscroll)::-webkit-scrollbar-button:hover { background-color: rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) !important; } :is(.dzaside, .rail-scroll, #clDetail .c-side, #mhMail .ml-rscroll)::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='%23E7F0EC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } :is(.dzaside, .rail-scroll, #clDetail .c-side, #mhMail .ml-rscroll)::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23E7F0EC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } } /* NEWQR28 - THE MATTHEW HOUSE QR STANDARD (owner, 28 Sep: round dots, round eyes, the round Matthew House logo one third across, from his reference file). The logo is now drawn INSIDE every QR by QrService.SvgPine, so the old logo tiles that each screen laid on top of the code are switched off everywhere - otherwise every code would carry two logos. The frames, stacks and cards around the QR (the "background design") are untouched. */ :is(.qr-logo, .pc-qrlogo, .pq .plogo) { display:none !important; } /* ============================================================================= VISITLOG29 (29 Sep 2026) - the Family Roster's CHECK-IN / OUT LOG (owner: "add the Check in out logs below the name of the student's and on the detail section ... when staff click on the each days they can see the all check in out logs below it"). Class days on the calendar are clickable (the picked one is ringed); the day's events sit in a glass card under the legend; each roster card carries that day's "In 9:15 AM ยท Out 9:37 AM" under the name. ============================================================================= */ .mh-app .pgp-win .adx-detail .ad-cal .dcell.pickable{cursor:pointer;transition:transform .12s,box-shadow .12s} .mh-app .pgp-win .adx-detail .ad-cal .dcell.pickable:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(30,55,48,.45)} .mh-app .pgp-win .adx-detail .ad-cal .dcell.pickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(47,107,87,.35)} .mh-app .pgp-win .adx-detail .ad-cal .dcell.picked{box-shadow:0 0 0 2px #fff,0 0 0 4px #2F6B57 !important} .mh-app .pgp-win .adx-rlog{display:block;margin-top:3px;font-size:11px;font-weight:700;color:#2F6B57; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} .mh-app .pgp-win .adx-log{margin:14px 0 16px;padding:14px 16px;border-radius:20px; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72));box-shadow:0 22px 54px -26px rgba(30,55,48,.42)} .mh-app .pgp-win .adx-logh{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px} .mh-app .pgp-win .adx-logt{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; background:linear-gradient(135deg,#42856E 0%,#2F6B57 60%,#2A5749 100%);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:#2F6B57} .mh-app .pgp-win .adx-logd{font-size:14px;font-weight:800;color:#1C2A25} .mh-app .pgp-win .adx-logsum{margin-left:auto;font-size:12px;font-weight:700;color:#2F6B57;padding:3px 10px;border-radius:999px; background:rgba(47,107,87,.1)} .mh-app .pgp-win .adx-logempty{font-size:13px;font-weight:600;color:#7A8A84;padding:6px 2px} .mh-app .pgp-win .adx-evlist{display:flex;flex-direction:column;gap:7px} .mh-app .pgp-win .adx-ev{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px; background:rgba(var(--tg-rgb,255,255,255),calc(.78*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));box-shadow:0 6px 16px -12px rgba(30,55,48,.35)} .mh-app .pgp-win .adx-evtime{flex:0 0 70px;font-size:13px;font-weight:800;color:#1C2A25;font-variant-numeric:tabular-nums} .mh-app .pgp-win .adx-evpill{flex:0 0 auto;min-width:74px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;padding:5px 10px;border-radius:9px} .mh-app .pgp-win .adx-evpill.in{background:rgba(78,124,114,.15);color:#3D655D} .mh-app .pgp-win .adx-evpill.out{background:rgba(201,123,90,.16);color:#B5663F} .mh-app .pgp-win .adx-evpill.auto{background:rgba(201,123,90,.08);color:#B5663F;box-shadow:inset 0 0 0 1px rgba(201,123,90,.35)} .mh-app .pgp-win .adx-evpill.edit{background:rgba(30,55,48,.07);color:#5E7A70} .mh-app .pgp-win .adx-evtx{display:flex;flex-direction:column;min-width:0} .mh-app .pgp-win .adx-evl{font-size:13px;font-weight:700;color:#1C2A25} .mh-app .pgp-win .adx-evs{font-size:12px;font-weight:600;color:#7A8A84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.dark .mh-app .pgp-win .adx-log{background:rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1)));border-color:rgba(180,210,235,.14)} body.dark .mh-app .pgp-win .adx-ev{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14)} body.dark .mh-app .pgp-win :is(.adx-logd,.adx-evtime,.adx-evl){color:#E6EEEA} body.dark .mh-app .pgp-win .adx-rlog{color:#8FBBA5} /* ============================================================================= ADXBIG29 (29 Sep 2026) - the FAMILY ROSTER window at the STANDARD DETAIL SIZE (owner: "make bigger the FAMILY ROSTER mock like other detail mocks cause we need more views here"). The same box as the Client / Program details (#mhDetail .modal, .cdbox): width min(1520px, 97vw), height min(93vh, 920px), the roster rail 340px. The month (calendar, legend, figures) is the left column; the check-in / out log is the right column, full height, scrolling on its own. A narrow screen stacks them again. ============================================================================= */ .mh-app .pgp-win.adx-card{width:min(1520px, calc(97 * var(--mh-vw)));height:min(calc(93 * var(--mh-vh)), 920px); max-width:100%;max-height:none} .mh-app .pgp-win .adx-rail{flex:0 0 340px} .mh-app .pgp-win .adx-detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr); column-gap:28px;overflow:hidden;padding:28px 32px 30px} .mh-app .pgp-win .adx-detail > .adx-top{grid-column:1 / -1} .mh-app .pgp-win .adx-main{min-height:0;overflow-y:auto;padding:2px 4px 6px 2px} .mh-app .pgp-win .adx-side{min-height:0;display:flex;flex-direction:column} .mh-app .pgp-win .adx-side > .adx-log{margin:2px 0 6px;flex:1;min-height:0;display:flex;flex-direction:column} .mh-app .pgp-win .adx-side .adx-evlist{flex:1;min-height:0;overflow-y:auto;padding:2px 4px 4px 2px} @media (max-width: 1100px){ .mh-app .pgp-win .adx-detail{display:block;overflow-y:auto} .mh-app .pgp-win .adx-main{overflow:visible} .mh-app .pgp-win .adx-side > .adx-log{margin:14px 0 0} .mh-app .pgp-win .adx-side .adx-evlist{overflow:visible} } .mh-app .pgp-win .adx-rlog{white-space:normal;overflow:visible;line-height:1.35} /* ADXBIG29: the day's times wrap in the wider rail, never cut */ /* ============================================================================= PERIODNAV29 (29 Sep 2026) - the Attendance toolbar's month button wears the SAME control glass as its < > arrows (owner: "the September 2026 doesn't have a background ... add a background same as it's arrows"); and the month picker's day view steps month to month with its own < > . ============================================================================= */ body:not(.dark) .mh-app .att-nav .att-period-btn{height:34px;padding:0 14px;border:1px solid rgba(47,107,87,.26);border-radius:9px; background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.05),0 6px 16px -10px rgba(30,55,48,.32); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%)} body:not(.dark) .mh-app .att-nav .att-period-btn:hover{border-color:rgba(47,107,87,.40); background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.46*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px -12px rgba(30,55,48,.32)} body.dark .mh-app .att-nav .att-period-btn{height:34px;padding:0 14px;border:1px solid var(--mh-line);border-radius:9px; background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .mh-app .anp-mnav{margin:2px 0 10px} .mh-app .anp-mnav span{font-size:14px} .mh-app .anp-mnav button{width:28px;height:28px} /* ============================================================================= PLANSIDE01 (1 October 2026) - THE PLANNER'S LEFT VIEWS PANEL. Owner: "OK build the left sidbar panel for the Planner section too". The panel itself is Program's (.cl-wrap / .cl-side.pg-side / .pg-sidetabs / .panel-collapse) and wears every rule those already have - the frosted rows, the icon chips, the 64px folded rail. Only what is NEW to this panel is here: CARDS the month picker, Staff Calendars and the colour key moved in from the old right column. They keep their own classes (.pl-rail .cal-grid.mc, .pl-card, .pl-filter) so they look exactly as they did; they scroll on their own under the fixed Views rows and fold away with the panel. COUNT the Upcoming Reminders count sits at the row's end; on the folded rail it rides the bell. GRID the calendar's second column is gone (.pl-cal-full) - the grid takes the full width. ============================================================================= */ .mh-app .pl-side .pg-sidetabs{flex:none} .mh-app .pl-side .pl-sidecards{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:12px;padding:2px 12px 14px; scrollbar-width:thin;scrollbar-color:rgba(30,55,48,.22) transparent; } .mh-app .pl-side .pl-sidecards::-webkit-scrollbar{width:6px} .mh-app .pl-side .pl-sidecards::-webkit-scrollbar-thumb{background:rgba(30,55,48,.22);border-radius:6px} .mh-app .pl-side .pl-sidecards::-webkit-scrollbar-button{display:none;height:0} .mh-app .cl-wrap.collapsed .pl-side .pl-sidecards{display:none} .mh-app .pl-side .pl-card{padding:12px 12px 10px;flex:none} .mh-app .pl-side .pl-card h4{font-size:13px;margin:2px 2px 8px} .mh-app .pl-side .pl-filter label{padding:5px 2px} .mh-app .pl-side .pl-tab{position:relative} .mh-app .pl-side .pl-tab .pl-tablbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mh-app .pl-side .pl-tab .tagn{margin-left:auto;flex:none;letter-spacing:0} .mh-app .cl-wrap.collapsed .pl-side .pl-tab .tagn{position:absolute;top:2px;right:6px;margin:0;padding:0 5px;font-size:10px;line-height:16px} .mh-app .pl-key .pl-keylist{display:flex;flex-direction:column;gap:7px;padding:0 2px 2px} .mh-app .pl-key .pl-keylist span{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mh-ink)} .mh-app .pl-key .pl-keylist i{width:11px;height:11px;border-radius:3px;flex:none} .mh-app .pl-cal-wrap.pl-cal-full{grid-template-columns:minmax(0,1fr)} .mh-app .pl-body{padding:4px 6px 18px} /* ============================================================================= PLANSIDE02 (1 October 2026) - THE PANEL KEEPS ONLY THE VIEWS; FILTERS + KEY GO TO THE TOOLBAR. Owner: "I don't want the small calendar, Staff Calendars and Key stay in the left sidebar that is looking childish ... move them below Filters button ... Small Calendar . Staff Calendars, and move the Key with it's background on the right side of the Month Week Day toggle button". KEY a read-only glass strip in the .pl-views family (38px pill, same glass), right after the toggle. FILTERS a labelled pill at the toolbar's far end - the Today pill's own shape - with the funnel and a count when not every staff calendar is shown; it opens the app's .filterpop (mh-toolbar.css, the Dashboard's) right-aligned under it, holding the two cards SIDE BY SIDE, month picker first. The cards keep .pl-card / .pl-rail .cal-grid.mc / .pl-filter, so they look as they always did. ============================================================================= */ .mh-app .pl-cal-toolbar{align-items:center} .mh-app .pl-keystrip{ display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:38px;box-sizing:border-box; padding:6px 16px;border-radius:999px; background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -10px rgba(30,55,48,.32); } .mh-app .pl-keystrip span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--mh-ink);white-space:nowrap} .mh-app .pl-keystrip i{width:10px;height:10px;border-radius:3px;flex:none} body.dark .mh-app .pl-keystrip{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:none} .mh-app .pl-fwrap{position:relative;margin-left:auto} .mh-app .pl-filterbtn{ display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;box-sizing:border-box;border-radius:999px;cursor:pointer; font-family:var(--mh-font-body);font-size:13px;font-weight:700;color:var(--mh-ink); background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -10px rgba(30,55,48,.32); transition:transform .18s ease,box-shadow .18s ease,border-color .15s ease,background .15s ease; } .mh-app .pl-filterbtn svg{width:16px;height:16px;color:var(--mh-ico-brand,#2F6B57)} .mh-app .pl-filterbtn:hover{transform:translateY(-2px);border-color:rgba(47,107,87,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 22px -12px rgba(30,55,48,.38)} .mh-app .pl-filterbtn.on{border-color:rgba(47,107,87,.55);box-shadow:0 0 0 3px rgba(47,107,87,.12),0 6px 16px -10px rgba(30,55,48,.32)} .mh-app .pl-filterbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(47,107,87,.3)} .mh-app .pl-filterbtn .badge{min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:grid;place-items:center;background:#2F6B57;color:#fff;font-size:10.5px;font-weight:800} body.dark .mh-app .pl-filterbtn{background:var(--mh-ctrl-fill);border-color:var(--mh-line);box-shadow:inset 0 1px 2px rgba(0,0,0,.22);color:var(--mh-ink)} .mh-app .pl-filterpop.filterpop{width:auto;right:0;left:auto;z-index:60;padding:16px;gap:12px;border-radius:18px} .mh-app .pl-filterpop .pl-fcols{display:grid;grid-template-columns:268px 240px;gap:12px;align-items:start} .mh-app .pl-filterpop .pl-card{margin:0;padding:12px 12px 10px} .mh-app .pl-filterpop .pl-card h4{font-size:13px;margin:2px 2px 8px} .mh-app .pl-filterpop .pl-filter label{padding:5px 2px} /* ============================================================================= PLANSIDE03 (1 October 2026) - TWO ICON POP-UPS AFTER THE TOGGLE, THE KEY ON THE RIGHT. Owner: "after the Month Week Day Toggle button add a Calendar Icon and when users click on that that Calendar shows up ... same theory will apply to Staff Calendars ... the real icon for that ... and move the Meeting Follow-Up court Training other reminder bar on the right on same row". (Replaces the PLANSIDE02 Filters pill.) BUTTONS 38px round, the Today pill's glass; the glyph in brand pine; "on" while open (or, for staff, while a calendar is hidden - with the count riding the corner). CARDS each opens under its own button. OPAQUE in the theme tint, exactly as every menu (mh-themeglass 2b: a see-through card over the calendar lets the day numbers bleed into it). ============================================================================= */ .mh-app .pl-popwrap{position:relative;flex:none} .mh-app .pl-iconbtn{ position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;box-sizing:border-box;border-radius:50%;cursor:pointer; color:var(--mh-ico-brand,#2F6B57); background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 100%); border:1px solid rgba(47,107,87,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -10px rgba(30,55,48,.32); transition:transform .18s ease,box-shadow .18s ease,border-color .15s ease,background .15s ease; } .mh-app .pl-iconbtn svg{width:18px;height:18px} .mh-app .pl-iconbtn:hover{transform:translateY(-2px);border-color:rgba(47,107,87,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 22px -12px rgba(30,55,48,.38)} .mh-app .pl-iconbtn.on{border-color:rgba(47,107,87,.55);box-shadow:0 0 0 3px rgba(47,107,87,.14),0 6px 16px -10px rgba(30,55,48,.32)} .mh-app .pl-iconbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(47,107,87,.3)} .mh-app .pl-iconbtn .badge{ position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:99px; display:grid;place-items:center;background:#2F6B57;color:#fff;font-size:10px;font-weight:800;box-shadow:0 0 0 2px #fff; } body.dark .mh-app .pl-iconbtn{background:var(--mh-ctrl-fill);border-color:var(--mh-line);box-shadow:inset 0 1px 2px rgba(0,0,0,.22);color:#8FBBA5} body.dark .mh-app .pl-iconbtn .badge{box-shadow:0 0 0 2px #1d2421} .mh-app .pl-cal-toolbar .pl-keystrip{margin-left:auto} /* .pl-popwrap > - one notch above the glass card rule (body:not(.dark) .mh-app :is(.pl-cal,.pl-card), which sets position:relative for its ::before) - measured: without it the card sat IN the toolbar row and stretched it. */ .mh-app .pl-popwrap > .pl-pop.pl-card{ position:absolute;top:calc(100% + 10px);left:0;z-index:60;margin:0;padding:12px 12px 10px;box-sizing:border-box;border-radius:18px; animation:fpIn .16s ease; } body:not(.dark) .mh-app .pl-pop.pl-card{ background:var(--tg-sweep,none),linear-gradient(180deg,rgb(var(--tg-rgb,255,255,255)) 0%,var(--tg-cream2,#F4F7F6) 100%); -webkit-backdrop-filter:none;backdrop-filter:none; border:1px solid rgba(255,255,255,.85); box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 22px 54px -26px rgba(30,55,48,.5),0 4px 10px -6px rgba(30,55,48,.2); } body.dark .mh-app .pl-pop.pl-card{background:var(--mh-surface);border:1px solid var(--mh-line);box-shadow:0 22px 54px -20px rgba(0,0,0,.6)} .mh-app .pl-minipop{width:276px} .mh-app .pl-staffpop{width:250px} .mh-app .pl-staffpop h4{font-size:13px;margin:2px 2px 8px} .mh-app .pl-staffpop label{padding:5px 2px} .mh-app .pl-pophd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px} .mh-app .pl-pophd span{font-size:13px;font-weight:700;color:var(--mh-ink)} .mh-app .pl-popnav{ width:28px;height:28px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer; border:1px solid rgba(47,107,87,.18);background:rgba(var(--tg-rgb,255,255,255),.7);color:var(--mh-ico-brand,#2F6B57); transition:transform .15s ease,border-color .15s ease; } .mh-app .pl-popnav svg{width:14px;height:14px} .mh-app .pl-popnav:hover{transform:translateY(-1px);border-color:rgba(47,107,87,.42)} body.dark .mh-app .pl-popnav{background:var(--mh-ctrl-fill);border-color:var(--mh-line);color:#8FBBA5} /* ============================================================================= KPICARD01 (1 October 2026) - EVERY RECORD CARD WEARS THE CLIENT CARD. Owner, with the Clients grid beside the Programs grid: "compare the Client KPI cards ... to all other KPI cards why they are different looks? ... change them like Client Section look ... only on the KPI cards not inside the details mock or wizards mocks". And on the ring: "match everything except the ring ... that is for staff to know" - so the pine NEEDS-ATTENTION ring stays the Clients' own signal (.idcard.needs-attn, mh-theme.css) and is NOT copied here. MEASURED on the Clients .idcard with the ring taken off: radius 18, padding 18/18/14, the theme's --mh-shadow-sm at rest, lifted 3px with --mh-shadow on hover. The others differed by CARDWX18's inset + 14px/32px float, a 14px corner (Program, Students, Attendance) and 20px padding. The glass itself (CARDWX18 above) was already the same on all of them - unchanged. Services hub tiles (.svc-card) take the frame but keep their own padding: they are centred icon tiles, not records, and 18px would crowd them. `.mh-app.mh-app` lifts these to (0,3,1), level with CARDWX18's body:not(.dark) / body.dark rules, and this block comes after them. ============================================================================= */ body .mh-app.mh-app :is(.pg-card,.pg-stu-card,.hs-card,.ns-bar--cap,.svc-card,.pg-add){border-radius:18px} body .mh-app.mh-app :is(.pg-card,.pg-stu-card,.hs-card){padding:18px 18px 14px} body .mh-app.mh-app :is(.pg-card,.pg-stu-card,.hs-card,.ns-bar--cap,.svc-card){ box-shadow:var(--mh-shadow-sm); transition:transform .16s,box-shadow .16s,border-color .16s,background .16s; } body .mh-app.mh-app :is(.pg-card.pg-clickable,.pg-card.att-pcard,.pg-stu-card,.hs-card,.svc-card):hover{ transform:translateY(-3px);box-shadow:var(--mh-shadow); } /* ============================================================================= HUNT02 (1 October 2026) - ONE COUNTRY FIELD: FLAG, 8PX, NAME. Owner: "make space between country flag and country name ... all countries fields must be same with flag". Drawn by Services/Flags.Country / Flags.Field for every country value on a record, a wizard rail or a review card. The flag is the 4:3 file at 20x14 with a hairline so white flags (Japan, Lebanon's field) do not dissolve into a white tile. ============================================================================= */ .mh-ctry{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;vertical-align:middle} .mh-ctry-f{width:20px;height:14px;border-radius:2px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(30,55,48,.16)} .mh-ctry-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.dark .mh-ctry-f{box-shadow:0 0 0 1px rgba(255,255,255,.20)} /* ============================================================================= PGCARD01 (1 October 2026) - THE PROGRAM SECTION'S CARDS ARE THE CLIENT CARD. Owner: "the KPI cards of the Client section ... all getting same interface but program section ... the KPI cards are different? can you standardize them". The frame already matched (KPICARD01); the INSIDE did not. Programs (active + completed), the Students class picker and the Attendance term picker now print the household card's own anatomy (.idcard / .idc-*, mh-theme.css): avatar + name + pills + sub-line + QR, a hairline, one stats row, the "... View" arrow. Only what that anatomy has no word for is here. ============================================================================= */ /* four stats: first left, last right, the middle two centred - the 3-stat row's rule, widened */ .mh-app .idc-stats4{display:flex;justify-content:space-between;gap:10px} .mh-app .idc-stats4>div{flex:1 1 0;min-width:0;text-align:center} .mh-app .idc-stats4>div:first-child{text-align:left} .mh-app .idc-stats4>div:last-child{text-align:right} .mh-app .idc-stats4 .v .pg-count{font:inherit;color:inherit} .mh-app .idc-stats4 .v .pg-count.soon{color:var(--mh-danger)} /* the program glyph in the avatar circle, the size of the person glyph on a client card */ .mh-app .pg-pcard .idc-ph svg{width:26px;height:26px;color:#F4F0E6} /* Complete / Remove bottom left (where a student's Exit sits); the note on a completed card */ .mh-app .pg-pcard .pg-cardacts{display:inline-flex;align-items:center;gap:8px} .mh-app .pg-pcard .pg-cardacts .pg-exit-btn{margin-right:0} .mh-app .pg-pcard .pg-cardnote{color:var(--mh-muted);font-size:12.5px;font-weight:600} .mh-app .pg-pcard.completed{opacity:.92} .mh-app .pg-pcard:focus-visible{outline:2px solid var(--mh-pine,#2E4A43);outline-offset:2px} /* the pickers' View is a label, not a button: the card's own hover drives its arrow (as before) */ .mh-app .pg-pcard:hover .att-viewbtn .bh-ring{background:#5E8157;border-color:#5E8157;color:#fff} .mh-app .pg-pcard:hover .att-viewbtn .bh-label::after{width:100%} .mh-app .pg-pcard:hover .att-viewbtn .bh-ring svg{transform:translateX(2px)} /* PGCARD01b (1 Oct 2026) - THE PROGRAM CARDS ARE THE SIDEBAR'S GLASS, MEASURED. Owner: "change the interface of the program cards same as the left sidebar panel ... the color only ... check it's glass or something else". It WAS glass - the same recipe as .cl-side, value for value - but it rendered grey: sampled (228,232,236) on the cards vs (237,244,254) on the sidebar. Cause: the page's entrance animation (.reveal, mh-rise) ends with fill-mode FORWARDS, so a finished opacity animation keeps holding the wrapper - and that makes the wrapper the cards' backdrop root: their blur saw an empty layer, not the wallpaper, and only the thin tint showed. The sidebar sits outside .reveal and was never affected. Here the rise plays the same way but lets go when it ends - and, PGCARD01d, owner: "when I am changing the Tabs ... the KPI cards for a sec showing the old version then showing the new version ... no animation please remove it". While the fade PLAYED the cards were grey again (frozen mid-fade: (234,238,242)), so every tab change flashed the old look. The entrance animation is GONE on the Program pages: the content is simply there, at rest, and the glass reaches the wallpaper at once. Measured: (243,247,254) on the cards = the sidebar's white. Program page only. */ .mh-app .pg-wrap .reveal{opacity:1;transform:none;animation:none} /* the avatars' solid glyphs (the Program Details cap, the graduate, the clipboard) */ .mh-app .pg-pcard .idc-ph svg{width:28px;height:28px;color:#F4F0E6} /* PGCARD01c (1 Oct 2026) - REMOVE IS RED AT REST. Owner: "change the Remove ... to red ... it looks like glow red". The card's own red (the Exit / Remove hover wash: danger tint + danger rim) now shows before the hover, with a soft red glow under it; hover fills it solid danger, as the household record's .btn-danger does. Complete is unchanged. */ body .mh-app .pg-pcard .pg-exit-btn.pg-rm{ background:linear-gradient(180deg,rgba(176,70,60,.12) 0%,rgba(176,70,60,.06) 100%); border:1px solid rgba(176,70,60,.45);color:var(--mh-danger,#B0463C); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px -8px rgba(176,70,60,.55); } body .mh-app .pg-pcard .pg-exit-btn.pg-rm:hover{ background:var(--mh-danger,#B0463C);border-color:var(--mh-danger,#B0463C);color:#fff; box-shadow:0 8px 18px -6px rgba(176,70,60,.6); } body.dark .mh-app .pg-pcard .pg-exit-btn.pg-rm{background:rgba(214,98,86,.14);border-color:rgba(214,98,86,.5);color:#E88B80;box-shadow:0 6px 16px -8px rgba(214,98,86,.5)} body.dark .mh-app .pg-pcard .pg-exit-btn.pg-rm:hover{background:#C2554A;border-color:#C2554A;color:#fff}